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 ' , ' AmericanSamoa(684) ' ],
[ ' 376 ' , ' Andorra(376) ' ],
[ ' 244 ' , ' Angola(244) ' ],
.....
]

new Ext.form.ComboBox( {
fieldLabel:'CountryCode',
name:'country_code',
forceSelection:true,
listWidth:200,
store:newExt.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:'ManagementLevel',
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