form中的combobox组件详解
form中的combobox组件详解
一、概述
根类：Ext.form.field.ComboBox
Ext.viewBoundList 约束列表
二、组件讲解
1、下拉列表框本地数据
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:"005"}
]
});
var textForm=Ext.create("Ext.form.Panel",{
title:"form中下拉列表框本地数据实例",
bodyStyle:"padding:5 5 5 5",
frame:true,
width:400,
height:250,
id:"my_form",
renderTo:"formDemo",
defaults:{
labelSeparator:":",
labelAlign:"left",
labelWidth:100,
width:200,
allowBlank:false, //是否能为空
msgTarget:"side" //提示信息现在的位置
},
items:[{
xtype:"combobox",
listConfig:{ //控制下拉列表的样式
emptyText:"没有找到匹配的项",
maxHeight:200
},
fieldLabel:"选择部门",
name:"post",
queryMode:"local",//[local |remot] //本地化数据或者外部数据
store:st,
valueField:"id",//真正传入的值
displayField:"name", //显示的值
forceSelection:true,//不运行使用数据集合中没有的数据
typeAhead:true, //自动填充后续内容
value:"001"//默认值
}]
})
})
2、下拉列表框内存代理数据(可以使用ajax，由于没有后台处理，所以用的memory代理来实现)
Ext.onReady(function(){
Ext.QuickTips.init();
//部门类
Ext.define("city",{
extend:"Ext.data.Model",
fields:[
{name:"name"},
{name:"id"},
{name:"c"}
]
});
var st=Ext.create("Ext.data.Store",{
model:"city",
pageSize:2,
proxy:{
type:"memory",
data:[
{name:"保定",id:"001"},
{name:"邯郸",id:"002",c:"a"},
{name:"石家庄",id:"003"},
{name:"邢台",id:"004"},
{name:"北京",id:"005"}
]
},
autoLoad:true
});
var textForm=Ext.create("Ext.form.Panel",{
title:"form中下拉列表框内存代理实例", //可以使用ajax，由于没有后台。
bodyStyle:"padding:5 5 5 5",
frame:true,
width:400,
height:250,
id:"my_form",
renderTo:"formDemo",
defaults:{
labelSeparator:":",
labelAlign:"left",
labelWidth:100,
width:300,
allowBlank:false, //是否能为空
msgTarget:"side", //提示信息现在的位置
pageSize:2 //设置每页展示几条数据
},
items:[{
xtype:"combobox",
listConfig:{ //控制下拉列表的样式
emptyText:"没有找到匹配的项",
maxHeight:200,
getInnerTpl:function(){ //使用样式模版
return "<div class='{c}'>{name},{id}</div>"
}
},
fieldLabel:"城市",
name:"post",
queryMode:"remot",//[local |remot] //本地化数据或者外部数据
mixChars:1,//以一个字段来查询
queryDelay:400,//响应时间
queryParam:"wheresql", //以什么参数名来给后台传
store:st,
multiSelect:true, //允许多选
valueField:"id",//真正传入的值
displayField:"name" //显示的值
//使用分页，它会自动向后台传入limit pageSize 参数
}]
})
})
3、时间选择器
Ext.onReady(function(){
Ext.QuickTips.init();
var textForm=Ext.create("Ext.form.Panel",{
title:"form中下拉列表框时间实例",
bodyStyle:"padding:5 5 5 5",
frame:true,
width:400,
height:250,
id:"my_form",
renderTo:"formDemo",
defaults:{
labelSeparator:":",
labelAlign:"left",
labelWidth:100,
width:300,
allowBlank:false, //是否能为空
msgTarget:"side" //提示信息现在的位置
},
items:[{
xtype:"timefield",
fieldLabel:"上班时间",
minValue:"9:00", //指定最小时间
maxValue:"18:00", //指定最大事件
minText:"时间要大于{0}",
maxText:"时间要小于{0}",
format:"G时i分",
increment:60, //指定步长
invalidText:"时间格式错误",//提示信息
pickerMaxHeight:100 //指定最大的高度
}]
})
})
3、日期选择器
Ext.onReady(function(){
Ext.QuickTips.init();
var textForm=Ext.create("Ext.form.Panel",{
title:"form中下拉列表框时间实例",
bodyStyle:"padding:5 5 5 5",
frame:true,
width:400,
height:250,
id:"my_form",
renderTo:"formDemo",
defaults:{
labelSeparator:":",
labelAlign:"left",
labelWidth:100,
width:300,
allowBlank:false, //是否能为空
msgTarget:"side" //提示信息现在的位置
},
items:[{
xtype:"timefield",
fieldLabel:"上班时间",
minValue:"9:00", //指定最小时间
maxValue:"18:00", //指定最大事件
minText:"时间要大于{0}",
maxText:"时间要小于{0}",
format:"G时i分",
increment:60, //指定步长
invalidText:"时间格式错误",//提示信息
pickerMaxHeight:100 //指定最大的高度
}]
})
})