PDA

View Full Version : SASS changes in Ext.form.panel affecting to Ext.panel.Panel



nicanor.gutierrez
5 Jul 2013, 12:20 AM
Hello, I'm using ExtJS 4.2 and CMD 3.1.2.342.

I'm trying to modify the style of the forms in a custom theme that i have created. The problem is that every change that I apply to form panels, are applied to the regular panels too. Maybe I'm not understanding any concept, but as I understood how theming works, changes made in myPackage/sass/var/form/Panel.scss should only affect to components with xtype 'form', and not to components with xtype 'panel'.

For example:

I have the following code in myPackage/sass/var/form/Panel.scss:


$panel-body-background-color : #000000 !default;
$panel-header-color : #000000 !default;

and the following code in myPackage/sass/var/panel/Panel.scss



$panel-body-background-color : #EDEDE1 !default;
$panel-header-color : #EDEDE1 !default;


When I build the package and the app, all my form panels will have the background color and header font color defined for Ext.panel.Panel components, and not the ones defined for Ext.form.Panel

After try this, I removed all the style defined for Ext.panel.Panel, leaving only the one defined for Ext.form.Panel and the result is that all panel in my application have this last style.

What is the problem? Is this a bug? Is anything that I misunderstood?

slemmon
9 Jul 2013, 1:50 PM
FormPanel is a very slightly elevated Panel class and doesn't have its own set of CSS vars / mixins (versus Window which does).

I think the best route will be to instead create a custom UI and use that on the panels / FormPanels you want to have a unique appearance.

*see the Creating Custom Component UIs sub-section in the theming guide:
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming-section-styling-your-application

nicanor.gutierrez
10 Jul 2013, 1:43 AM
FormPanel is a very slightly elevated Panel class and doesn't have its own set of CSS vars / mixins (versus Window which does).

I think the best route will be to instead create a custom UI and use that on the panels / FormPanels you want to have a unique appearance.

*see the Creating Custom Component UIs sub-section in the theming guide:
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming-section-styling-your-application

Thank you for your reply slemmon. I solved it using Custom Component UIs. My question was just to clarify the reason of the behaviour that I described in my previous post. And now is clear, so thank you for your help!