ExtJs ComboBox浅析

转自:http://blog.csdn.net/safewolf/article/details/2224072

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

一:远程连接(remote)

1.后台数据格式:{success:true,total:5,data:[{EMPNO:'7369',ENAME:'SMITH',JOB:'CLERK'}]}

	var combo = new Ext.form.ComboBox({
		renderTo: 'd',
		minChars: 3,//输入字符长度达到3就会去查询
		listWidth: 220, //下拉列表显示长度
        typeAhead: true, //是否把选中的内容替代到text框中
        forceSelection: true, 
        triggerAction: 'all', //点击 triggerBtn 的时候,再查询还是列出所有(local一般是all)
        mode: 'remote',//远程连接 本地是local
        valueField: 'mid',//对应下面store里的'mid'，
        displayField: 'job',//显示的值
        resizable: true,
        pageSize: 2,//分页
        editable: true,//是否可以输入
        store: store,
        emptyText:'请选择',
//         readOnly : true,// 是否只读
        listeners:{
         select  :function(combo,record,index){
              alert(combo.value);
//               alert(record.get('mid'));
         }
       } 
  /*     onSelect: function(record){ // override default onSelect to do redirect
           alert(record.get('mid'));
        }*/
	});
	//	cbx.on('select',function(c,record,index){
//		alert(record.get('mid'));
//	});

到后台数据是query=?

二:本地数据源local

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