Ext.form.field.ComboBox示例

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());
            }
        }]
    });
});

运行效果如上图所示。