1. #1
    Ext User
    Join Date
    May 2008
    Posts
    110
    Vote Rating
    0
    illuminum is on a distinguished road

      0  

    Default [solved] Trouble restoring state on a ComboBox

    [solved] Trouble restoring state on a ComboBox


    How do I restore the state on a ComboBox? I've setup the code that is pasted below and I can see in Firebug that the 'statesave' event does indeed fire but 'staterestore' never does. I can also see a cookie stored but all I can inspect as far as that goes is the encoded session id--I'm not sure if I'm supposed to be able to see actual objects and values in the cookie or not. Again, back to the basic question, what exactly do I need to do to restore the state so that upon reloading the application, the application's stateful components conspicuously restore the options/values that were set within them?

    Here is my code:

    Code:
        var combo = new Ext.form.ComboBox({
            id: 'myCombo',
            emptyText: 'Select Foo',
            title: 'Title',
            store: myStore,
            mode: 'remote',
            triggerAction: 'all',
            displayField: 'name',
            valueField: 'rendition_id',
            lazyInit: false,
            stateful: true,
            stateEvents: ['select','change'],
            queryDelay: 1
        });
        combo.on({
           statesave: { // I can see that this fires correctly in firebug
                fn: function() {
                    console.log('statesave');
                }
            },
           staterestore: { // Though this never fires
                fn: function() {
                    console.log('staterestore');
                }
            }
         });
    Code:
        <script type="text/javascript">
          Ext.onReady(function() { 
              Ext.BLANK_IMAGE_URL = 'assets/ext/resources/images/default/s.gif';
               Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
                  expires: new Date(new Date().getTime()+(1000*60*60*24*1))
              }));
              Ext.QuickTips.init();
              App.init();
          });
        </script>
    Last edited by illuminum; 8 Jul 2008 at 9:40 AM. Reason: made the code more generic and concise

  2. #2
    Ext User
    Join Date
    May 2008
    Posts
    110
    Vote Rating
    0
    illuminum is on a distinguished road

      0  

    Default


    One more followup question,

    How do I instruct either the store or the combobox to cache it's values so that I can call the load() manually (if thats part of what is needed) with the objective that the combobox does not trigger a post request each time the drop-down is triggered?

  3. #3
    Ext User
    Join Date
    May 2008
    Posts
    110
    Vote Rating
    0
    illuminum is on a distinguished road

      0  

    Default


    bump--
    maybe I'll find the solution myself, I'm about to browse the community learning center--but in the meanwhile... ?

    I wonder what my super's reaction would be to a proposal to license extjs. What kind of license should I be looking at for a non-profit educational institution (NCSA at UIUC)? So far it's just me working with ExtJS. Silver ($299/yr) I assume, but do any special provisions apply to an institution like mine? This particular question is probably best posted elsewhere...

  4. #4
    Ext User
    Join Date
    May 2008
    Posts
    110
    Vote Rating
    0
    illuminum is on a distinguished road

      0  

    Default


    Figured it out
    Code:
        this.navigation.test = new Ext.form.ComboBox({
            id: 'select_arabic_test',
            emptyText: 'Select: Arabic Font',
            title: 'Arabic Font',
            store: this.navigation.select.arabic.store,
            displayField: 'name',
            valueField: 'rendition_id',
            plugins: [
                new Ext.ux.plugins.FitToContainer({
                    width_adjust: -28,
                    x_adjust: 6,
                    y_adjust: 1,
                    hideFirst: true,
                    height: false
                })
            ],
            stateful: true,
            stateEvents: ['select'],
            getState: function() {
                return {
                    selectedIndex: this.getValue()
                };
            },
            applyState: function(state) {
                this.onLoad = this.onLoad.createSequence(function() {
                    this.selectByValue(state.selectedIndex);
                },this);
            },
            mode: 'local',
            triggerAction: 'all',
            lazyInit: false,
            forceSelection: true,
            editable: false
        });
    Code:
          Ext.onReady(function() { 
            Ext.BLANK_IMAGE_URL = 'assets/ext/resources/images/default/s.gif';
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
                expires: new Date(new Date().getTime()+(1000*60*60*24*365)) // 1 year
            }));
            Ext.QuickTips.init();
            Quran.init();
          });

  5. #5
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    388
    Vote Rating
    13
    devtig will become famous soon enough

      0  

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    0
    houxiaofei is on a distinguished road

      0  

    Default


    Quote Originally Posted by illuminum View Post
    Figured it out
    Code:
        this.navigation.test = new Ext.form.ComboBox({
            id: 'select_arabic_test',
            emptyText: 'Select: Arabic Font',
            title: 'Arabic Font',
            store: this.navigation.select.arabic.store,
            displayField: 'name',
            valueField: 'rendition_id',
            plugins: [
                new Ext.ux.plugins.FitToContainer({
                    width_adjust: -28,
                    x_adjust: 6,
                    y_adjust: 1,
                    hideFirst: true,
                    height: false
                })
            ],
            stateful: true,
            stateEvents: ['select'],
            getState: function() {
                return {
                    selectedIndex: this.getValue()
                };
            },
            applyState: function(state) {
                this.onLoad = this.onLoad.createSequence(function() {
                    this.selectByValue(state.selectedIndex);
                },this);
            },
            mode: 'local',
            triggerAction: 'all',
            lazyInit: false,
            forceSelection: true,
            editable: false
        });
    Code:
          Ext.onReady(function() { 
            Ext.BLANK_IMAGE_URL = 'assets/ext/resources/images/default/s.gif';
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
                expires: new Date(new Date().getTime()+(1000*60*60*24*365)) // 1 year
            }));
            Ext.QuickTips.init();
            Quran.init();
          });
    Why I used the same vode here but never get the state saved and the applyState and staterestore never get fired, the following is my sample code, any advice? Thanks!
    Code:
    
    
    var combo = new Ext.form.ComboBox({
            id: 'myCombo',
    		stateId: 'myCombostate',
            emptyText: 'Select one please',
            title: 'Please select one...',
            store: [['f','Foo'],['b','Bar']],
            displayField: 'name',
            valueField: 'rendition_id',
    		plugins: [
                new Ext.ux.plugins.FitToContainer({
                    width_adjust: -28,
                    x_adjust: 6,
                    y_adjust: 1,
                    hideFirst: true,
                    height: false
                })
            ],
            stateful: true,
            stateEvents: ['select'],
            getState: function() {
                return {
                    selectedIndex: this.getValue()
                };
            },
            applyState: function(state) {
                this.onLoad = this.onLoad.createSequence(function() {
                    this.selectByValue(state.selectedIndex);
                },this);
            },
    		mode: 'local',
            triggerAction: 'all',
    		lazyInit: false,
    		forceSelection: true,
            editable: false
        });
    combo.on({
           statesave: { 
                fn: function() {
                    alert('statesave');
                }
            },
           staterestore: { 
                fn: function() {
                    alert('staterestore');
                }
            }
         });
    
    
    Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
    
    
     var win = new Ext.Window({ 
    id:'combo-win' 
    ,title:'test'
    ,layout:'fit' 
    ,width:280 
    ,height:360 
    ,closable:false 
    ,border:false 
    ,items:combo 
    }); 
    
    
    win.show(); 
    Ext.QuickTips.init();
    
    
    });

Thread Participants: 2