1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default Ext.ux.ThemeCombo - w/o page reload and keeping state

    Ext.ux.ThemeCombo - w/o page reload and keeping state


    Hi all!

    Here is code of theme selector combo that doesn't reload page on theme change and that keeps state if the state management is available. You need to give id="theme" to your css link in the header:

    HTML Code:
    <link href="/extjs-2.0/resources/css/xtheme-default.css" rel="stylesheet" type="text/css" id="theme">
    PHP Code:
    // vim: ts=4:sw=4:nu:fdc=4:nospell
    /**
     * Ext.ux.ThemeCombo - Combo pre-configured for themes selection
     * 
     * @author    Ing. Jozef Sakáloš <jsakalos@aariadne.com>
     * @copyright (c) 2008, by Ing. Jozef Sakáloš
     * @date      30. January 2008
     * @version   $Id: Ext.ux.ThemeCombo.js 472 2009-01-22 23:24:56Z jozo $
     *
     * @license Ext.ux.ThemeCombo is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * License details: http://www.gnu.org/licenses/lgpl.html
     */

    /*global Ext */

    Ext.ux.ThemeCombo Ext.extend(Ext.form.ComboBox, {
        
    // configurables
         
    themeBlueText'Ext Blue Theme'
        
    ,themeGrayText'Gray Theme'
        
    ,themeBlackText'Black Theme'
        
    ,themeOliveText'Olive Theme'
        
    ,themePurpleText'Purple Theme'
        
    ,themeDarkGrayText'Dark Gray Theme'
        
    ,themeSlateText'Slate Theme'
        
    ,themeVistaText'Vista Theme'
        
    ,themePeppermintText'Peppermint Theme'
        
    ,themePinkText'Pink Theme'
        
    ,themeChocolateText'Chocolate Theme'
        
    ,themeGreenText'Green Theme'
        
    ,themeIndigoText'Indigo Theme'
        
    ,themeMidnightText'Midnight Theme'
        
    ,themeSilverCherryText'Silver Cherry Theme'
        
    ,themeSlicknessText'Slickness Theme'
        
    ,themeVar:'theme'
        
    ,selectThemeText'Select Theme'
        
    ,themeGrayExtndText:'Gray-Extended Theme'
        
    ,lazyRender:true
        
    ,lazyInit:true
        
    ,cssPath:'../ext/resources/css/' // mind the trailing slash

        // {{{
        
    ,initComponent:function() {

            
    Ext.apply(this, {
                
    store: new Ext.data.SimpleStore({
                    
    fields: ['themeFile', {name:'themeName'type:'string'}]
                    ,
    data: [
                         [
    'xtheme-default.css'this.themeBlueText]
                        ,[
    'xtheme-gray.css'this.themeGrayText]
                        ,[
    'xtheme-darkgray.css'this.themeDarkGrayText]
                        ,[
    'xtheme-black.css'this.themeBlackText]
                        ,[
    'xtheme-olive.css'this.themeOliveText]
                        ,[
    'xtheme-purple.css'this.themePurpleText]
                        ,[
    'xtheme-slate.css'this.themeSlateText]
                        ,[
    'xtheme-peppermint.css'this.themePeppermintText]
                        ,[
    'xtheme-chocolate.css'this.themeChocolateText]
                        ,[
    'xtheme-green.css'this.themeGreenText]
                        ,[
    'xtheme-indigo.css'this.themeIndigoText]
                        ,[
    'xtheme-midnight.css'this.themeMidnightText]
                        ,[
    'xtheme-silverCherry.css'this.themeSilverCherryText]
                        ,[
    'xtheme-slickness.css'this.themeSlicknessText]
                        ,[
    'xtheme-gray-extend.css'this.themeGrayExtndText]
    //                    ,['xtheme-pink.css', this.themePinkText]
                    
    ]
                })
                ,
    valueField'themeFile'
                
    ,displayField'themeName'
                
    ,triggerAction:'all'
                
    ,mode'local'
                
    ,forceSelection:true
                
    ,editable:false
                
    ,fieldLabelthis.selectThemeText
            
    }); // end of apply

            
    this.store.sort('themeName');

            
    // call parent
            
    Ext.ux.ThemeCombo.superclass.initComponent.apply(thisarguments);

            if(
    false !== this.stateful && Ext.state.Manager.getProvider()) {
                
    this.setValue(Ext.state.Manager.get(this.themeVar) || 'xtheme-default.css');
            }
            else {
                
    this.setValue('xtheme-default.css');
            }

        } 
    // end of function initComponent
        // }}}
        // {{{
        
    ,setValue:function(val) {
            
    Ext.ux.ThemeCombo.superclass.setValue.apply(thisarguments);

            
    // set theme
            
    Ext.util.CSS.swapStyleSheet(this.themeVarthis.cssPath val);

            if(
    false !== this.stateful && Ext.state.Manager.getProvider()) {
                
    Ext.state.Manager.set(this.themeVarval);
            }
        } 
    // eo function setValue
        // }}}

    }); // end of extend

    // register xtype
    Ext.reg('themecombo'Ext.ux.ThemeCombo);

    // eof 
    Enjoy!
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi, excellent component!!

    Why not a cyclebutton like www.jadacosta.es

    Thanks in advance,

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Reason is simple: If you have 2 themes then cycle button is better, however, I have currently 10 themes installed so cycling through them to find the one I want seems quite awkward to me.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi,

    I think that with cycle button you can select like a combobox without pass by all entries.

    I

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Yeah, you're right. I just have theme selection hidden in config form where combo fits better than button. It's matter of taste to great degree so now users can choose...
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi Jsakalos,

    What is the way for keep state in this component? http://www.extjs.com/forum/showthread.php?t=34014


    Thanks in advance,

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    I would use the same method as is used in all my examples: http://examples.extjs.eu If you change theme there and then you reload the page the theme is preserved. Tak a look at the source code: http://examples.extjs.eu/source.php?file=examples.js and http://examples.extjs.eu/source.php?....ThemeCombo.js
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275
    Vote Rating
    0
    Stripeman is on a distinguished road

      0  

    Default Download?

    Download?


    Hi jsakalos.. I have tried to find those themes to download and have been unsuccessful. I have been to your page and dont see them either.. I looked in the source code and sure i can download each css file and each image within it.. but that would take an eternity! Do you have those themes for download and are they maintained as new versions of ext come out ?

    Thanks for your time and consideration.

    Terry

  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Themes are collected from this forums. Please search.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  10. #10
    Sencha Premium Member
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    77
    Vote Rating
    0
    DamianHartin is on a distinguished road

      0  

    Default


    Thanks for this sample Saki - very good extension.

    I was wanting to add the combo box to a viewports north region header, do you know if this is possible?