ExtJs ComboBox浅析

最新推荐文章于 2017-10-04 05:00:00 发布

最新推荐文章于 2017-10-04 05:00:00 发布 · 132 阅读

文章标签：

#json #javascript #ViewUI

本文介绍如何使用Ext ComboBox组件，并详细讲解了配置不同数据源的方法，包括使用JavaScript数组、JSON数据源以及远程数据源。

转自:http://blog.youkuaiyun.com/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