您的位置:首页 > 其它

Ext.form.field.ComboBox示例

2015-01-26 16:42 423 查看
Ext.onReady(function ()
{
//创建数据模型
Ext.regModel("PostInfo", {
fields: [{ name: "province" }, { name: "post" }]
});
//定义组合框中显示的数据源
var postStore = Ext.create("Ext.data.Store", {
model: "PostInfo",
data: [
{ province: "北京", post: "100000" },
{ province: "通县", post: "101100" },
{ province: "昌平", post: "102200" },
{ province: "大兴", post: "102200" },
{ province: "密云", post: "101500" },
{ province: "延庆", post: "102100" },
{ province: "顺义", post: "101300" },
{ province: "怀柔", post: "101400" },

]
});
//创建表单
var combo = Ext.create("Ext.form.Panel", {
title: "Ext.form.field.ComboBox本地数据源示例",
renderTo: Ext.getBody(),
bodyPadding: 5,
frame: true,
height: 100,
width: 270,
defaults: {
labelSeparator: ":",
labelWidth: 70,
width: 200,
labelAlign: "left"
},
items: [{
xtype: "combo",
listConfig: {
emptyText: "未找到匹配项",
maxHeight: 150
},
name: "post",
fieldLabel: "邮政编码",
triggerAction: "all",        //单击触发按钮显示全部数据
store: postStore,
displayField: "province",
valueField: "post",
queryMode: "local",
forceSelection: true,        //要求输入值必须在列表中存在
typeAhead: true,     //允许自动选择匹配的剩余部分文本
value: "102200",
id:"comboDemo"
}],
buttons: [{
text: "重置",
handler: function ()
{
combo.getForm().reset();
}
}, {
text: "保存",
handler: function ()
{
var getCombo = combo.getForm().findField("comboDemo");
Ext.Msg.alert("值", "实际值:" + getCombo.getValue() + ",显示值:" + getCombo.getRawValue());
}
}]
});
});




运行效果如上图所示。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: