PDA

View Full Version : Theming question - not seeing column layout being applied after building CSS



colingaj
2 Dec 2013, 9:37 AM
Hi all

Scenario is as follows:

1) We create an Ext.form.Panel as follows -- note the "column" layout for the panel:


this.myForm = Ext.create( 'Ext.form.Panel',
{
border : false,
style : 'padding:10px 0px 10px 10px;',
frame : true,
layout : 'column',
trackResetOnLoad : true,


fieldDefaults :
{
msgTarget : 'under',
labelWidth : 65
},
items :
[
this.firstName,
this.lastName
]


} );

2) We have a custom theme being applied over the neptune theme, and run "sencha ant clean" and "sencha app build" from sencha command.

3) For some reason, after this is done, we don't see the column layout being applied. Without using a custom style, in another project, we have seen that this column layout maps to the CSS ".x-column" style. However, in the above scenario, we don't see this style anywhere in the resulting "*all.css" CSS file after running sencha command.

Any ideas what might be happening?

Thanks
Colin

colingaj
2 Dec 2013, 10:16 AM
Okay, some more information:

I do see that the following line is being added to my custom theme <custom-theme>-all.css file in the packages/<custom-theme>/build/resources folder:


/* line 1, ../../../../ext/packages/ext-theme-base/sass/src/layout/container/Column.scss */
.x-column {
float: left;
}


But the problem is that my bootstrap.css file is referencing


@import 'build/<appname>/production/resources/<appname>-all.css';

and I don't see the above .x-column attribute in the above <appname>-all.css CSS file. What is it that I am not doing correctly? How do I get the build process to correctly include the right CSS files that I built? I thought I had followed all the steps in the Ext JS theming tutorial, but it seems like I am missing something.

More specifically, I thought that the build process will filter out the unneeded styles. From the theming guide: "Sencha Cmd has the ability to filter out unused CSS style rules when you build an app" so does that mean that I am only supposed to include the <appname>-all.css file and not the <custom-theme>-all.css file? If so, it is not working ...

scottmartin
3 Dec 2013, 3:39 PM
Duplicate post:
http://www.sencha.com/forum/showthread.php?277322