pre-selecting value in Combo box in extjs

Question

I want to implement the following combobox in ExtJS. The question is, how to make the third option selected by default?

<select name="meter_payment_option" onChange="smart_meter(this.value)"> 
    <option value="1">All Up-Front</option> 
    <option value="2">Reduced Up-Front</option> 
    <option value="3" selected="selected">No Up-Front</option> 
</select> 

What I currently have is:

var meter_payment_option_values = new Ext.data.SimpleStore({
    fields: ['id', 'value'],
    data: [
        ['1', 'All Up-Front'],
        ['2', 'Reduced Up-Front'],
        ['3', 'No Up-Front']]
});

var smart_meter_term = new Ext.form.ComboBox({
    name: 'smart_meter_term',
    editable: false,
    typeAhead: false,
    allowblank: false,
    triggerAction: 'all',
    hiddenName: 'my_dropdown',
    fieldLabel: 'SmartM.T',
    store: meter_payment_option_values,
    displayField: 'value',
    valueField: 'id',
    mode: 'local'
});

How do I make the 3rd option (No Up-Front) selected by default?

Answer 1

You need to set the value config option to the id of the default value, e.g.:

var smart_meter_term = new Ext.form.ComboBox({
                  name:'smart_meter_term' ,
                  editable: false,
                  typeAhead: false, 
                  allowblank:false , 
                  triggerAction: 'all',
                  hiddenName: 'my_dropdown',
                  fieldLabel:'SmartM.T',
                  store:meter_payment_option_values,
                  displayField:'value',
                  valueField:'id',
                  mode:'local',
                  // default value is 3 (No Up-Front)
                  value: 3
                });

http://www.sencha.com/deploy/dev/docs/index.html?class=Ext.form.ComboBox