16 Mar 2013 3:24 AM #1
Sencha CMD - Theme Creation/Editing
Can someone post a clear and correct howto guide for CMD and theme creation/editing?
Most documentation is outdated or simply just doesn't work.
17 Mar 2013 3:31 AM #2
Joining to the question.
After updating app from 4.1.1 ( the latest public release ), nothing works and i'm still trying to figure out what to do , without any success.
Docs are messed and incorrect ( especially on the theming part ), Release notes unclear, Many structure changes and no official update guide. Very frustrating
17 Mar 2013 7:32 AM #3
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
Cmd 3.1 does not support Ext JS 4.1.1, only 4.2.0 (which is the latest public release).
For docs for 3.1, yes there aren't any that are up to date but we are working on getting docs for them as quite a bit has changed or have been added.Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
17 Mar 2013 8:06 AM #4
"After updating app" - i meant after upgrading to 4.2 from 4.1. the structure of the themes had changed and it's unclear how to organize or re-organize it now.
for example, i was importing default theme and then modifying it in app.scss :
@import 'compass'; $font-family: sans-serif; @import 'ext4/default/all'; // other sass rules
*Sorry for interfering the initial question. i think it's related
17 Mar 2013 11:46 PM #5
I didn't want to constrain the question to themes only.
There are missing and dark spots in app creation as well.
Also, something is not working very well between CMD and architect which, IMHO, shall really go together...
Anyway, glad to hear sencha is working on that...
18 Mar 2013 11:09 PM #6
I don't purport to be an expert (quite the opposite), but here's what I've done after a little trial and error, in the hope it might be useful to someone:
1) Create an empty theme. Replace "mytheme" with the name of your theme. (NB: I believe you can create a theme extending another one, but I've just done it from scratch.)
sencha generate package -type=theme mytheme
cur_dir = File.dirname(__FILE__) css_path = $css_path = File.join(cur_dir, '..', 'build', 'resources') output_style = :nested
4) Copy over files from the sass/etc, sass/src, and sass/var directories of the theme you are modifying to the corresponding directories in your theme as appropriate and edit. To keep things organized, the convention seems to be to use etc for general, theme-wide variables, and to put the rest into the appropriate files in var.
The way the pre-packaged themes are built, you can accomplish quite a lot just by changing the variables in the various files in var. You only need to put anything in src if you want to create entirely new classes -- say, an additional ui (skin, really) for a particular type of component (keeping in mind you can edit the existing uis as desired if you just want to change the default look), or the classes for a custom component type you've built.
You could write the var files from scratch, too, but I find it's useful to have the reference to which variables are set in the parent theme(s): I just delete the ones I'm not changing.
You can also dig through to see where those variables are used by looking at the corresponding src files of the parent theme(s). So, for instance, if you're extending the Neptune theme, look at the Neptune src files as well as the ext-theme-neutral files, which Neptune extends, and the ext-theme-base files, which ext-theme-neutral extends.
5) Once you've made some change you want to see, compile the theme. From the directory the theme is located in:
sencha package build
7) To test / use in your app, change app config / copy-and-paste css and image files and edit links as appropriate, depending on how your app is structured.
19 Mar 2013 2:40 PM #7
@london_lawyer - thank you
@sencha-team: do you think it might be possible to have a wiki for stuff like that?
I understand preparing the main stream documentation is not an easy task, that's why I think a wiki might be really useful for a user-based howto repository.
21 Mar 2013 8:48 AM #8
Waiting to upgrade to 4.2 until there are some better docs on how to generate our custom themes.
21 Mar 2013 2:37 PM #9
@london_lawyer: Thank you very much! That really helped a lot!Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)
Enhanced ExtJS adapter for Adobe AIR
22 Mar 2013 8:50 AM #10
Setting default theme
Thought I'd add my small discoveries here since the official docs are still lacking.
The default theme that's used by 'sencha app build' is controlled by the app.theme line in the .sencha/app/sencha.cfg
I'm unclear on what the requires: line is used for in the package.json file. I'd guessed that that was how you'd add additional sass dependancies but sass files are picked up by just placing them in the theme's sass/src directory.
Thread Participants: 15
- nathanstitt (1 Post)
- mitchellsimoens (1 Post)
- KajaSheen (1 Post)
- makana (3 Posts)
- MichaelOstrovsky (2 Posts)
- jhoweaa (2 Posts)
- dongryphon (2 Posts)
- sdruckerfig (1 Post)
- Dmoney (2 Posts)
- london_lawyer (1 Post)
- fabio.policeno (2 Posts)
- droessner (1 Post)
- mbudm (2 Posts)
- noithattanthinh (1 Post)
- vikramark (2 Posts)