How to use themes by form

[RafaMD]

I finally discovered how to customize a theme:

The sample application 'Ordering' use config.ui ="blue-panel" in the advanced part of any forms to change the aspect of the form. But, what is this?

ExtJs use the css class '.x-panel-default-framed' to paint a form.

Config.ui="blue-panel" change 'default' by 'blue-panel' so the class used to paint the form is '.x-panel-blue-panel-framed'

So, you have to make a class that defines the custom form, e.g.:

.x-panel-myclass-framed {border-style:solid;border-color:green; background-color:red;}

and use config.ui="myclass" in the form you want to change.

It is simple as you know how to do it.

There are more classes that can be changed. You can use 'developer tools' of chrome to investigate.

[aware_support]

For those who are familiar with Javascript and the Sencha (EXT JS) library the Advanced feature in forms and grids can be a really powerful tool.

Aware IM allows you to customize the configuration object which is created just before a form or a grid is created by Sencha. This object is called "config". Setting Sencha properties into this object you can add or change default configuration parameters.

If you look up Sencha documentation you will see that both forms and grids support the "ui" parameter, which just sets a particular class to a form or a grid. If this class is provided in the CSS file of a theme (or your own CSS) then the form or grid will be drawn using this class. Windows 8 themes provide a number of classes that allow drawing in different colors, so all you need to do is set the correct name into the ui parameter:

config.ui = "..."

[hpl123]

Hi support,
I was wondering, is it possible to do this with/over all themes so i could e.g. use the "Red Wine" theme for 1 particular form when using say the "Light Blue" as my standard application theme?

Thanks, regards Henrik

[aware_support]

No, only Windows 8 themes support this at the moment.