extjs的combobox的用法

可以用javascript的数组作为数据源,也可以用json作为数据源:

1.用javascript数组 

var  CountryCode  =  [
    [ ' 93 ' , ' Afghanistan(93) ' ],
    [ ' 355 ' , ' Albania  (355) ' ],
    [ ' 213 ' , ' Algeria  (213) ' ],
    [ ' 684 ' , ' American Samoa  (684) ' ],
    [ ' 376 ' , ' Andorra  (376) ' ],
    [ ' 244 ' , ' Angola  (244) ' ],
.....
]

new  Ext.form.ComboBox( ... {
                fieldLabel: 'Country Code',
                name:'country_code',
                forceSelection: true,
                listWidth: 200,
                store: new Ext.data.SimpleStore(...{
                    fields: ['value', 'text'],
                    data : CountryCode
                    }),
                valueField:'value',
                displayField:'text',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus:true,//用户不能自己输入,只能选择列表中有的记录
                allowBlank:false
            } )

 

 

2:用json作为数据源

 

     var  comboOptions  =      new  Ext.data.JsonStore( ... {
        url:'myurl',
           fields: ['id','name']} ); 

comboOptions.load();

new  Ext.form.ComboBox( ... {
                fieldLabel: 'Management Level',
                name:'group_id',
                forceSelection: true,
                listWidth: 150,
                store: comboOptions,
                   valueField:'id',
                displayField:'name',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus:true,
                allowBlank:false
            } )

myurl输出的json数据格式如下:

[{"id":"1","name":"Super Admin"},{"id":"2","name":"Admin"}]

需要注意的是,如果返回的json数据有多列,需要在new JsonStore的时候,在fields一项中填写所有column的名字,否则不能填充combobox