您的位置:首页 > Web前端 > JavaScript

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

2013-11-25 13:46 344 查看
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
		}]
	});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: