Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Sencha CMD - Theme Creation/Editing

  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    118
    Vote Rating
    12
      5  

    Default 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.

    Thanks

  2. #2
    Sencha Premium Member MichaelOstrovsky's Avatar
    Join Date
    May 2008
    Location
    Tel Aviv, Israel
    Posts
    142
    Vote Rating
    7
      0  

    Default

    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

  3. #3
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,421
    Vote Rating
    1271
      0  

    Default

    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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    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 services@sencha.com

    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.

  4. #4
    Sencha Premium Member MichaelOstrovsky's Avatar
    Join Date
    May 2008
    Location
    Tel Aviv, Israel
    Posts
    142
    Vote Rating
    7
      0  

    Default

    "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 :


    Code:
    @import 'compass';
    $font-family:  sans-serif;
    @import 'ext4/default/all'; 
    // other sass rules
    
    After the upgrade i couldn't get ( really tried ) how it should be accomplished. what should go where ? what should be compiled by compass ? etc. and that even before getting to publishing the app with sencha cmd.

    *Sorry for interfering the initial question. i think it's related

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Posts
    118
    Vote Rating
    12
      0  

    Default

    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...

    M.

  6. #6
    Sencha User
    Join Date
    Jul 2010
    Posts
    6
    Vote Rating
    4
      4  

    Default

    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.)
    Code:
    sencha generate package -type=theme mytheme
    2) Set the base theme you want to extend in the new theme's package.json by adding an extend property. For example, if you want to extend Neptune with your own colors and other changes:
    Code:
    "extend": "ext-theme-neptune"
    3) Check the config.rb in your new theme. I'll admit I haven't even *tried* looking into what's truly needed or even used here, but I surmised the following might be useful, to set (a) the current directory, (b) where the resulting css will be output, and (c) what the output style will look like:
    Code:
    cur_dir = File.dirname(__FILE__)
    css_path = $css_path = File.join(cur_dir, '..', 'build', 'resources')
    output_style = :nested
    output_style may not be necessary, since it seems like the builder creates dev, debug, and minified versions anyway.

    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:
    Code:
    sencha package build
    6) Test the look of the theme by opening up [theme-dir]/build/example/theme.html in Chrome/Firefox/etc. NB: you'll need to test some things, like grids, using your own app.

    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.

  7. #7
    Sencha User
    Join Date
    Dec 2007
    Posts
    118
    Vote Rating
    12
      0  

    Default

    @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.

    Thanks!

  8. #8
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    316
    Vote Rating
    59
      0  

    Default

    +1

    Waiting to upgrade to 4.2 until there are some better docs on how to generate our custom themes.

  9. #9
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    21
      0  

    Default

    @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

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    9
    Vote Rating
    0
      0  

    Default 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.

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •