ExtJs 3 combobox setting default value

Question

I am new to ExtJS.. a few weeks old, so please pardon me if this seems to be a trivial query.

I have to load the list of values in a combo box (SourceSystem) based on value selected in another combo box (DeliveryMethod). I am using JSON stores for both the combos.

So I have added a listener on combobox 2 as

listeners:{
     'select': function(combo, record,index) {
      selectedDelMethod = record.data.codeValue;
      var srcSystem = Ext.getCmp('sourceSystemCombo');
      srcSystem.reset();
      srcSystem.store.reload({ 
      params: {
        attrID: 3002,
        delvMethod: selectedDelMethod

        }
      });        
   }

Here, the srcSystem.store loads different list based on selectedDelMethod. This is working fine. But when the SourceSystem combox id loaded, it is populated, but nothing is shown as default value.

fieldLabel:     'Source System',
id:        'sourceSystemCombo',
xtype:          'combo',
mode:           'local',
triggerAction:  'all',
forceSelection: true,
editable:       false,
name:           'sourceSystem',
displayField:   'shortDescription',
valueField:     'codeValue',
hiddenName:     'sourceSystem',
store:          sourceSystemStore,  
listeners: {
   'afterrender': function(combo){
    var selectedRecord = combo.getStore().getAt(0);
    combo.setValue(selectedRecord);        
  }
}

I am sure I am missing something in the afterrender listener. Please tell me how can I get the first value to be the default value?

combo.getStore().getAt(0) will return data record, while combo.setValue() accepts String value refer : docs.sencha.com/extjs/3.4.0/#!/api/… try to get value from record e.g record.data.value — MMT

mehta mehta · Accepted Answer · 2013-04-19T05:28:21

I found that the combo.getStore().getAt(0) was returning null. After trying couple of methods I managed to resolve the problem. Instead of putting an event on combobox, I updated the reload of store to set first value in combo. Here is the

var srcSystem = Ext.getCmp('sourceSystemCombo');
srcSystem.reset();
srcSystem.store.reload({ 
    params: {
        attrID:     3002,
        delvMethod: selectedDelMethod
    },
    scope : this,
    callback : function(records, operation, success){
        srcSystem.setValue(srcSystem.store.getAt(0).get('codeValue'));
    }
});

The setting value on combobox has to be a callback function on store as loading of store is an asynch process. see this!

ExtJs 3 combobox setting default value

2 Answers