Changes to organization of Ext JS Themes in Cmd 3.0.2

[IlanCopelyn]

@dongryphon thanks : ) will the 4.2 beta be available for license-only developers?

@worth the short answer is: if you've managed to compile sass to .css then probably all you need to do is change your .html file to include {appname}\resources\{themename}\app.css as the stylesheet (replace ext-all.css).

the slightly longer answer is that the directory structure and build process is being tweaked atm so perhaps wait till 4.2 + the new guides are out? The existing guides will give you a good idea of what's going on in the build process and how to customise themes, but you will have to manually alter the build files atm to support global themes (see the github repo I posted previously):
http://docs.sencha.com/ext-js/4-1/#!/guide/theming
http://docs.sencha.com/ext-js/4-1/#!/guide/command
etc...

[worthlutz]

@worth the short answer is: if you've managed to compile sass to .css then probably all you need to do is change your .html file to include {appname}\resources\{themename}\app.css as the stylesheet (replace ext-all.css).

the slightly longer answer is that the directory structure and build process is being tweaked atm so perhaps wait till 4.2 + the new guides are out? The existing guides will give you a good idea of what's going on in the build process and how to customise themes, but you will have to manually alter the build files atm to support global themes (see the github repo I posted previously):
http://docs.sencha.com/ext-js/4-1/#!/guide/theming
http://docs.sencha.com/ext-js/4-1/#!/guide/command
etc...

@IlanCopelyn

Thanks, I looked at your github repo briefly but need to study it more. I am not up to speed on the build process and have tried to make some changes once which lost me lots of time as I ended up with two copies of my application instanitated one on top of the other with the active one on the bottom. Needless to say it took a while to figure out why nothing was working. Hopefully there will be more in depth documentation and guides.

Worth

[IlanCopelyn]

I would suggest the following: (1) Build a single app with (2) the prescribed senchacmd created directory structure and then (3) add a custom theme. Once you have all of that building and your apps index.html is loading in your browser you can start fiddling about with editing the theme.

Here's a head start:
1. Create the app

unzip the extjs src to c:\ext-4.1.1a
c:
cd \
sencha -sdk ext-4.1.1a generate app -path temp\foo

NB this is for a single app - it doesn't use the workspace stuff from my github example
Have a look at the structure of the stuff in C:\temp\foo
Better yet commit all the files in temp\foo to local git repo so you can see what changes senchacmd does below

2. Make sure the apps index.html loads in your browser
file:///C:/Temp/foo/index.html
There's not much to the default app btw

3. Edit the app and add the components you want
I'd avoid making a complex app - just copy one of the apps from the c:\ext-4.1.1a\examples directory

4. Add a theme

cd temp\foo
sencha generate theme yourthemename

check which files have been added
Actually it looks like the theme just references the default. You'll have to copy the SASS source manually:

source = C:\Temp\foo\ext\resources\themes\stylesheets\ext4\default
target = C:\Temp\foo\packages\theme\stylesheets\yourthemename\default

you may need to edit the SASS config files

C:\Temp\foo\packages\yourthemename\sass\*

5. Make sure you can build the theme (i.e. scss -> .css)

sencha app build

Should create:
C:\Temp\foo\resources\yourthemename\app.css

6. Edit you index.html to use the built .css

7. Finally
make a test change to one of the sass theme source files (something obvious like the base colour), rebuild, and reload your index.html and confirm that the change has propagated

Once you've succeeded with all of that, then look at the github repo above in order to try share a single theme amongst multiple apps. Good luck

PS

sencha help {any commands here}

is useful for exploring the switches/options available with each sencha command