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()); } }] }); });
运行效果如上图所示。
相关文章推荐
- Ext.form.field.ComboBoxView
- 【转】解决Ext.form.ComboBox提交始终获得displayField的值
- Ext.form.ComboBox 学习示例
- Ext.form.field.Number示例
- Ext.form.ComboBox提交始终获得displayField的值-解决
- ExtJs4 Ext.form.field.ComboBox 刷新数据出现一直加载的问题
- Ext.form.field.ComboBox结合Servlet、JSON实现AutoComplete
- 如果使用Ext.form.ComboBox 作为editor,并设置了store,在选择后,在表格单元中显示的是store中的displayfield 而不是valuefield
- Ext.form.field.Picker (ComboBox、Date、TreePicker、colorpick.Field)竖向滚动导致布局错误
- 继承Ext.form.TriggerField,实现树下拉选择(新增示例下载)
- Ext.form.field.comboBox
- Ext.form.field.File示例
- Ext.form.field.ComboBox 切换store没有反应
- Ext.form.ComboBox获得displayField的值
- [导入]继承Ext.form.TriggerField,实现树下拉选择(新增示例下载)
- 组合框Ext.form.field.ComboBox
- 解决Ext.form.TextField的 maxLength 属性失效问题
- Ext.form.NumberField使用
- Ext.form.field.HtmlEditor编辑器字段
- Ext.form.ComboBox setValue()初始值设定问题