1. 程式人生 > >Extjs4中的Form之下拉列表combobox的使用

Extjs4中的Form之下拉列表combobox的使用

Ext.onReady(function(){
	Ext.QuickTips.init();
	//部門類
	Ext.define("department",{
		extend:'Ext.data.Model',
		fields:[
			{name:'name'},
			{name:'id'}
		]
	});
	var st = Ext.create("Ext.data.Store",{
		model:'department',
		data:[
			{name:'銷售部',id:'001'},
			{name:'人事部',id:'002'},
			{name:'研發部',id:'003'},
			{name:'產品部',id:'004'},
			{name:'實施部',id:'0`05'},
			{name:'法務部',id:'006'}
		]
	});
	Ext.create("Ext.form.Panel",{
		title:'本地combobox例項',
		renderTo:'formDemo',
		bodyPadding:'5 5 5 5',
		height:100,
		width:270,
		frame:true,
		defaults:{
			labelSeparator :": ",
			labelWidth : 70,
			width : 200,
			allowBlank: false,
			msgTarget : 'side',
			labelAlign:'left'
		},
		items:[{
			xtype:'combobox',
			listConfig:{//控制下拉列表的樣式
				emptyText:'沒有找到匹配的數值',
				maxHeight:200
			},
			fieldLabel:'選擇部門',
			name:'post',
			queryMode:'local',//[local|remot]
			store:st,
			valueField:"id",
			displayField :'name',//展示的部門名稱
			forceSelection:true,//不允許輸入資料集合中沒有的數值
			typeAhead : true,//自動補全,預設為false
			value:'001'//預設顯示的部門的id
		}]
	});
});