Extjs4实例:Form下拉列表combobox的使用
发布时间:2015-11-24 编辑:jiaochengji.com
分享一段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:[{ // www.jbxue.com
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
}]
});
});
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:[{ // www.jbxue.com
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
}]
});
});
您可能感兴趣的文章:
Extjs4实例:Form下拉列表combobox的使用
Extjs4实例:Form下拉列表combobox remot模式
jQuery.combobox
Extjs4实例:Form日期选择器datefield
jquery easyui自定义下拉框列表
net winform ComboBox数据绑定显示问题
ComboBox控件绑定数据方法
Magic Grid Combobox
c# 下拉颜色框(自定义控件)的实现代码(图文)
jquery.combobox中文api和例子,修复了上面的小bug
[关闭]