Question

我想在商店的Panel中加载我的Combobox。

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请求的响应是：

[ { ＆＃34; id＆＃34;：＆＃34; 1＆＃34;，＆＃34; name＆＃34;：＆＃34; Red＆＃34; }， { ＆＃34; id＆＃34;：＆＃34; 2＆＃34;，＆＃34;姓名＆＃34;：＆＃34;蓝＆＃34; }， { ＆＃34; id＆＃34;：＆＃34; 3＆＃34;，＆＃34; name＆＃34;：＆＃34; Green＆＃34;}]

这似乎是一个有效的json。

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

Answer 1

你的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作为对象数组的键，并在root config中的reader属性中指定该键。对于普通商店，也没有rootProperty属性也可以删除它。

希望这会对你有所帮助。

Answer 2

我找到了另一个解决方案

我不知道这个解决方案是否比另一个更好，但它可以工作:)

var colorsFromDB = [];

var colors = Ext.create('Ext.data.Store', {
    id: "colors",
    fields: ['id', 'name'],
    data : colorsFromDB
});

Ext.Ajax.request({
    url: "app/view/main/loadFromDatabase.php",
    method: 'POST',
    success: function( r ) {
        var res = Ext.decode(r.responseText);
        if (res !== null) {
            Ext.each(res.colors, function(obj) {
                colorsFromDB.push({
                    id: obj.id,
                    name: obj.name
                })
            });
            colors.loadData(colorsFromDB);
        }
    },
    failure: function( r ) {
        console.log(r.responseText);
    }
});

Answer 3

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

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'
}

Extjs从商店加载组合框

3 个答案: