如何从数据库加载组合框中的值

时间:2017-02-21 11:31:49

标签: extjs combobox

如何将组合框值而不是硬编码从数据库填充到组合框的存储中

{
    xtype: 'fieldset',
    title: 'Dress Types',
    items: [
        {
            xtype: 'combobox',
            displayField: "displayName",
            valueField: "displayName",
            emptyText: 'Select Type',
            store: {
                fields: ["id", "displayName"],
                data: [
                    { "id": "1", "displayName": "Kurtha" },
                    { "id": "2", "displayName": "Denim Top" },
                    { "id": "3", "displayName": "Western T shirt" },
                    { "id": "4", "displayName": "Sleeveless" }
                ]
            },
            name: 'dresses',
            margin: '15px',
            allowBlank: false,
            forceSelection: true,
        }
    ]
}

提前致谢

2 个答案:

答案 0 :(得分:3)

有一些方法可以让你得到这个。您需要根据输入数据在js中创建一个商店,然后将其分配给comboBox。

给出示例

var combstore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: [{
                name: 'value',
                mapping: "ITEMID",
                type: 'string'
            }, {
                name: 'name',
                mapping: "TITLE",
                type: 'string'
            }],
            proxy: new Ext.data.HttpProxy({
                type: 'ajax',
                actionMethods: {
                    read: "POST"
                },
                url: Your URL,
                headers: {
                    'Accept': 'application/json; charset=utf-8'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                },
                autoLoad: true
            })
        });

现在,在您的comboBox中,您可以将此combstore称为storestore :combstore

在变量combostore中,我们使用Ext.data.Store创建一个数据存储并将值放在字段中。然后在代理方法中调用url并映射字段中的值。 阅读文档以更好地理解Doc

答案 1 :(得分:2)

检查以下代码。

 Ext.create('Ext.form.ComboBox', {
    valueField: "displayName",
    emptyText: 'Select Type',
    store: Ext.create('Ext.data.Store', {
        fields: ["id", "displayName"],
        proxy: {
            url: 'data1.json',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
        autoLoad: true
    }),
    name: 'dresses',
    margin: '15px',
    allowBlank: false,
    forceSelection: true,
    renderTo: Ext.getBody()
});

我假设我的服务撤回数据如下

{
"data": [{
    "id": "1",
    "displayName": "Kurtha"
}, {
    "id": "2",
    "displayName": "Denim Top"
}, {
    "id": "3",
    "displayName": "Western T shirt"
}, {
    "id": "4",
    "displayName": "Sleeveless"
}]
}