View Full Version : Generating a custom theme using Sencha cmd

22 Feb 2014, 3:11 AM
I moved to ExtJS 4.2.2 from ExtJS4.2.1.
We have our custom theme defined using sass vars in a .scss file. I am now trying to build our custom theme using Sencha cmd based off the classic theme.

Following the instructions in the Theming guide provided, I added all our sass vars to all.scss. After running the "sencha package build command", I took the generated my-custom-theme-all.css(along with the images) from the "build/resources" and added it into the css folder of my application(not the app that the sencha guide recommends to build using sencha cmd).

But after this I am seeing multiple issues in the UI. e.g.
1) In the tree panel, the expander icon(+) is not seen
2) On mouse over of a grid row, the color of the row is not the custom color that we have set.
3) All the tabs in the tab panel look like buttons rather than tabs.
4) The grid cells have very thick borders.

Im new to sencha cmd, SASS etc. So any help will be appreciated.

Thanks in advance.


22 Feb 2014, 9:30 AM
It is most likely due to the change in variable names from versions or along those lines.

You can check the neutral themes for current values.

Also, since your are generating a new theme, it would be better practice to place all the scss in the appropriate DIR instead of having a massive all.scss?


The entire purpose of structuring your code / styles is that it is organized and everyone knows where to look to correct anything based on the component under review.

You can review the theming guide to see the importance of each dir: (etc/var/etc)

22 Feb 2014, 11:16 AM
Thanks Scott !

Is there some documentation available which lists the variable names that have changed across versions?

While debugging the tree expander(+) issue, I did notice that the class x-tree-elbow-empty is not part of the generated css. Does this mean that I missed something while building the theme using sencha cmd?

Also, for the border issue with the grid, the default border-style set by ExtJS in the .x-grid-cell class is 'solid'. This causes the cell borders to be really thick even if I set the border-width to 1px. Im not sure why this is so.

I do plan to restructure the styles once I get all the issues sorted out. The purpose of using the all.scss was to get a jumpstart to ensure that everything is working properly. Which right now does not seem to be the case.


22 Feb 2014, 11:23 AM
I do not believe there is a guide on the changes. You would have to review the changes using an element inspector or review the files of each version side x side.

You can post a few of the rules and perhaps some screens if you get stuck.