Extjs从存储加载组合框

我想将我的组合框从应用商店加载到面板中

var colors = new Object();

Ext.onReady(function(){

colors = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'app/view/main/loadFromDatabase.php',
        reader: {
            type: 'json',
            rootProperty: 'name'
        }
    },
});

我希望稍后在面板中加载的颜色如下：

{ xtype: 'combo', 
  fieldLabel: 'Farbe', 
  name: 'farbe', 
  store: colors , 
  queryMode: 'local', 
  displayField: 'name', 
  valueField: 'id' }

我对loadFromDatabase.php的ajax请求的响应是：

[ { “id”：“1”， “名称”：“红色” }, { “id”：“2”， “名称”：“蓝色” }, { “id”：“3”， “名称”：“绿色”}]

这似乎是一个有效的json

---

但是当我点击组合框时，框是空的。怎么了？

您的json应该如下所示

'items': [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }]

然后，您可以将您的商店指定为

var myStore = Ext.create('Ext.data.Store', {
     fields:['name','email','phone'],
     proxy: {
         type: 'ajax',
         url: '/yourpath.json',
         reader: {
             type: 'json',
             root: 'items'
         }
     },
     autoLoad: true
 });

因此，您必须使用对象数组将json设置为键，并在

reader

config中的

root

属性中指定该键。对于普通存储，也没有

rootProperty

属性。请将其删除

---

希望这对您有所帮助。

我找到了另一种解决方案

我不知道这个解决方案是否比另一个更好，但它是有效的：）

---

将这些添加到您的组合中：

listeners : {
    added : function(tis) {
            tis.getStore().load();
    }
}

并将这些添加到您的商店：

listeners : {
    load : function() {
            Ext.getCmp('yourcomboid').setValue(Ext.getCmp('yourcomboid').getValue());
    }
}

最后，为了避免第二次加载，将以下内容添加到组合中：

mode : 'local'

完整代码：

{
    xtype : 'combo',
    fieldLabel : 'Role Selection',
    id : 'role',
    hiddenName : 'role',
    hiddenValue : 1,
    editable : false,
    emptyText : 'Please select a role',
    typeAhead : true,
    triggerAction : 'all',
    lazyRender : true,
    mode : 'local',
    listeners : {
        added : function(
                tis) {
            tis.getStore().load();
        }
    },
    store : new Ext.data.JsonStore(
            {
                url : 'getRole',
                listeners : {
                    load : function() {
                        Ext.getCmp('role').setValue(Ext.getCmp('role').getValue());
                    }
                },
                fields : ['id','name' ],
                root : 'resultList',
            }),
    displayField : 'name',
    valueField : 'id'
}

---

如果OP使用的是ExtJS 5或Sencha Touch 2.3，则会有一个属性

rootProperty

：并且。您指定的根属性是

name

，但是，您的响应没有根属性，因此可能应该是

rootProperty:“

，或者如果您在@sreek521的示例中创建了一个根属性，如

items

。

rootProperty:'items'

{
    xtype : 'combo',
    fieldLabel : 'Role Selection',
    id : 'role',
    hiddenName : 'role',
    hiddenValue : 1,
    editable : false,
    emptyText : 'Please select a role',
    typeAhead : true,
    triggerAction : 'all',
    lazyRender : true,
    mode : 'local',
    listeners : {
        added : function(
                tis) {
            tis.getStore().load();
        }
    },
    store : new Ext.data.JsonStore(
            {
                url : 'getRole',
                listeners : {
                    load : function() {
                        Ext.getCmp('role').setValue(Ext.getCmp('role').getValue());
                    }
                },
                fields : ['id','name' ],
                root : 'resultList',
            }),
    displayField : 'name',
    valueField : 'id'
}