Pages

Thursday, June 7, 2012

Default selection in ExtJS combo boxes

Problem Statement: I have a combo box and the options are populated from a data store. In my case the date store is local data store. Only thing that I want is to make some option selected by default.


This is what my code looks like.

var statusStore = new Ext.data.ArrayStore({
    id: 0,
    fields: [
        'status',
        'label'
    ],
    data: [
           ["", 'All'],
           [true, 'Active'], 
           [false, 'Inactive']
          
    ]
});

items: [{                        
    mode:'local',
    hideLabel:true,    
    xtype: 'combo',
    id: 'filterStatus',
    editable:false,
    typeAhead: true,
    triggerAction: 'all',
    forceSelection: true,
    store: statusStore,
    displayField: 'label',
    width: 110,
    ctCls: 'MB'
}]

Problem Solution: One of the solution lies around using listeners. After the combo box is rendered, make the default selection. The one that works for me is as given in the code below.


var statusStore = new Ext.data.ArrayStore({
    id: 0,
    fields: [
        'status',
        'label'
    ],
    data: [
           ["", 'All'],
           [true, 'Active'], 
           [false, 'Inactive']
          
    ]
});

items: [{                        
    mode:'local',
    hideLabel:true,    
    xtype: 'combo',
    id: 'filterStatus',
    editable:false,
    typeAhead: true,
    triggerAction: 'all',
    forceSelection: true,
    store: statusStore,
    displayField: 'label',
    width: 110,
    ctCls: 'MB',
    listeners:{
        afterrender:function(){
            this.setValue(true);
            this.setRawValue('All');
        }
    }
}]

What I have done here is added a listener i.e. afterrender to make the default selection. The code above is self explanatory.

No comments:

Post a Comment