extjs4 - 在 ExtJS 4 中加载带有 json 数据的组合框

Question

我只是尝试使用基本数据存储将一些 json 数据简单地加载到我的组合框中。这是我的 json 数据:

{"services": [{"id": 1, "name": "dropbox"}, {"id": 2, "name": "facebook"}, {"id": 3, "name": "twitter"}]}

这是我的 extjs 4 代码:

Ext.onReady(function(){
    Ext.define('ServiceList', {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'ServiceList',
    proxy: {
        type: 'json',
        url: '/account/service/list',
        reader: {
            root: 'services',
            totalProperty: 'totalCount'
        }
    }
});
store.load();

Ext.create('Ext.panel.Panel', {
    layout: 'auto',
    title: 'VAC',
    width: '100%',
    renderTo: 'vac-app-window',
    items: [{
        xtype: 'tabpanel',
        autoTabs:true,
        activeTab: 0,
        border:false,
        defaults: {autoHeight:true, bodyStyle:'padding:10px'},
        items: [{
            title: 'Data Services',
            items: [{
                xtype:'combo',
                store:store
            }]
        }]
    }]
});
});

一切都在本地主机上完成，因此没有跨域的东西。我一直在浏览文档，但无法弄清楚我做错了什么。

一如既往，非常感谢任何提示!

更新:

我编辑了对数据存储的一些更改，并且更进一步:

Ext.define('ServiceList', {
    extend: 'Ext.data.Model',
    fields: [
        {name:'id', type:'int'},
        {name:'name', type:'string'}
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'ServiceList',
    proxy: {
        type: 'ajax',
        url: '/account/service/list',
        reader: {
            root: 'services',
            type: 'json'
        }
    }
});
store.load();

现在，当页面加载或我尝试单击组合框时，它寻址的 url 是:

GET/account/service/list?_dc=1318340688155&page=1&start=0&limit=25

根据我的阅读，这看起来像 jsonp，但我不知道页面、开始和限制参数来自哪里？

更新2:

感谢 Molecule Man 的帮助，我得以解决这个问题:

Ext.onReady(function(){

    Ext.define('ServiceList', {
        extend: 'Ext.data.Model',
        fields: [
            {name:'id', type:'int'},
            {name:'name', type:'string'}
        ]
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'ServiceList',
        autoLoad: true,
        proxy: {
            limitParam: undefined,
            startParam: undefined,
            paramName: undefined,
            pageParam: undefined,
            noCache:false,
            type: 'ajax',
            url: '/account/service/list',
            reader: {
                root: 'services'
            }
        }
    });

    Ext.create('Ext.panel.Panel', {
        layout: 'auto',
        title: 'VAC',
        width: '100%',
        renderTo: 'vac-app-window',
        items: [{
            xtype: 'tabpanel',
            autoTabs:true,
            activeTab: 0,
            border:false,
            defaults: {autoHeight:true, bodyStyle:'padding:10px'},
            items: [{
                title: 'Data Services',
                items: [{
                    xtype:'combo',
                    queryMode:'local',
                    emptyText: 'Select Service',
                    store:store,
                    displayField: 'name',
                    valueField: 'id'
                }]
            }]
        }]
    });
});

希望这对其他人有帮助:)

Answer 1

您的组合框配置不包含必需的 displayField(默认为“文本”)和 valueField(默认为 displayField 的值):

        items: [{
            xtype:'combo',
            displayField: 'name',
            valueField: 'id',
            store:store
        }]