Ext_ComboBox

1、本地数据源的组合框

Ext.onReady(function(){
//	数据模型
	Ext.regModel('postInfo',{ 
		fields:[{name:'province'},{name:'post'}]
	})
//	数据源
	var postStore=Ext.create('Ext.data.Store',{
		model:'postInfo',
		data:[
			{
				province:'北京',post:'1111'
			},
			{
				province:'上海',post:'2222'
			},
			{
				province:'广州',post:'3333'
			}
		]
	});
	
	Ext.create('Ext.form.Panel',{
		title:'comboBox测试',
		renderTo:Ext.getBody(),
		bodyPadding:5,
		frame:true,
		width:270,
		height:100,
		defaults:{ //设置表单字段的默认属性
			labelSeparator:':',
			labelWidth:70,
			width:200,
			labelAlign:'left'
		},
		items:[{
			xtype:'combo',
			listConfig:{
				emptyText:'没找到', //未匹配到值的提示
				maxHeight:60 //下拉列表的最大高度
			},
			name:'post',
			fieldLabel:'邮政编码',
			triggerAction:'all', //单击按钮显示全部数据
			store:postStore, //设置数据源
			displayField:'province', //显示的字段
			valueField:'post', //值字段
			queryMode:'local',  //本地模式
			forceSelection:true, //输入值必须为列表中的
			typeAhead:true,
			value:'1111'
		}]
	});
	
});

2、远程数据源

Ext.onReady(function(){
//	数据模型
	Ext.regModel('BookInfo',{ 
		fields:[{name:'bookName'}]
	})
//	数据源
	var bookStore=Ext.create('Ext.data.Store',{
		model:'BookInfo',
		proxy:{
			type:'ajax',
			url:'bookServer.jsp',
			reader:new Ext.data.reader.Array({model:'BookInfo'})
		}
	});
	
	Ext.create('Ext.form.Panel',{
		title:'comboBox测试',
		renderTo:Ext.getBody(),
		bodyPadding:5,
		frame:true,
		width:270,
		height:100,
		defaults:{ //设置表单字段的默认属性
			labelSeparator:':',
			labelWidth:70,
			width:200,
			labelAlign:'left'
		},
		items:[{
			xtype:'combo',
			fieldLabel:'书籍列表',
			listConfig:{
				loadingText:'loading...',
				emptyText:'没找到', //未匹配到值的提示
				maxHeight:60 //下拉列表的最大高度
			},
			allQuery:'allbook',
			minChars:3,
			queryDelay:300,
			queryParam:'searchBook',
			triggerAction:'all', //单击按钮显示全部数据
			store:bookStore, //设置数据源
			displayField:'bookName', //显示的字段
			valueField:'bookName', //值字段
			queryMode:'remote'  //本地模式
		}]
	});
	
});