Question

我正在使用loadData函数作为Ext.data.JsonStore的一部分，这里的数据来自json格式，但数据没有在jsonStore中加载。

xtype: 'combo',
                    id: 'cmblocation',
                    width: 211,
                    displayField: 'name',
                    valueField: 'id',            
                    store: land,
                    emptyText: 'Select Location',
                    allowBlank: false,
                    listeners: {
                        afterrender: function () {
                            Ext.Ajax.request({
                                url: 'http://localhost:58316/Test.asmx/GetAll',
                                method: 'GET',
                                headers: { 'Content-Type': 'application/json' },
                                success: function (response) {                               
                                  var data = Ext.decode(Ext.decode(response.responseText).d);                                                           
                                   land: new Ext.data.JsonStore({
                                        root: data,
                                        fields: ['Id', 'Name']                                 
                                    });

Answer 1

为此，您需要使用loadData的JsonStore方法。

loadData 方法将数据数据直接加载到商店中。

如果数据格式正确（例如，不需要读者处理），则使用此方法非常有用。如果您的数据需要处理以解码数据结构，请使用MemoryProxy或loadRawData。

在此 FIDDLE 中，我使用combobox和Ext.Ajax.request创建了一个演示。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Demo',

    launch: function () {
        //Create combobox
        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose Country',
            queryMode: 'local',
            margin: 10,
            store: Ext.create('Ext.data.JsonStore', {
                fields: ['code', 'name'],
                storeId: 'countryJsonStore'
            }),
            displayField: 'name',
            valueField: 'code',
            renderTo: Ext.getBody(),
            listeners: {
                afterrender: function (combo) {
                    //Call Ajax request to get data from json/server
                    Ext.Ajax.request({
                        //Here is server url/your method name
                        url: 'country.json',
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        success: function (response) {
                            var data = Ext.decode(response.responseText).data;
                            /*
                             * Loads an array of data straight into the Store.
                             * Using this method is great if the data is in
                             * the correct format already (e.g. it doesn't need to be processed by a reader).
                             * If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.
                             */
                            combo.getStore().loadData(data);
                        }
                    });
                }
            }
        });
    }
});

对于ExtJS 3.0，您可以参考 FIDDLE

CODE SNIPPET Extjs 3.0

Ext.onReady(function() {
    // create the combo instance
    var combo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        lazyRender: true,
        mode: 'local',
        store: new Ext.data.JsonStore({
            // store configs
            autoDestroy: true,
            storeId: 'myStore',
            fields: ['country_id', 'country_name']
        }),
        valueField: 'country_id',
        displayField: 'country_name',
        listeners: {
            afterrender: function(combo) {
                //Call Ajax request to get data from json/server
                Ext.getBody().mask('Please wait...');
                Ext.Ajax.request({
                    //Here is server url/your method name
                    url: 'http://vocab.nic.in/rest.php/country/json',
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success: function(response) {
                        Ext.getBody().unmask();
                        var data = Ext.decode(response.responseText);

                        /*
                         * Loads an array of data straight into the Store.
                         * Using this method is great if the data is in
                         * the correct format already (e.g. it doesn't need to be processed by a reader).
                         * If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.
                         */
                        combo.getStore().loadData(data.countries.map(item => {
                            return item.country;
                        }));
                    }
                });
            }
        }
    });

    combo.render(document.body);
});

您也可以在jsonstore.
中使用代理

您可以在此 FIDDLE

中看到

CODE SNIPPET

Ext.onReady(function() {

    var store = new Ext.data.JsonStore({
        autoLoad: true,
        root: 'countries',
        url: 'http://vocab.nic.in/rest.php/country/json',
        fields: ['country', {
            name: 'code',
            type: 'string',
            convert: function(v, rec) {
                return rec.country.country_id;
            }
        }, {
            name: 'name',
            type: 'string',
            convert: function(v, rec) {
                return rec.country.country_name;
            }
        }]
    });

    // create the combo instance
    var combo = new Ext.form.ComboBox({
        mode: 'local',
        store: store,
        valueField: 'code',
        displayField: 'name',
    });

    combo.render(document.body);
});

我如何将loadData函数作为Ext.data.JsonStore ExtJS3.0.0的一部分？

1 个答案: