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

Posted 2023-02-26

【中文标题】我如何将 loadData 函数作为 Ext.data.JsonStore ExtJS3.0.0 的一部分？

【英文标题】：How can i loadData function as part of the Ext.data.JsonStore ExtJS3.0.0?

【发布时间】：2018-03-14 03:57:45

【问题描述】：

我遇到了作为 Ext.data.JsonStore 一部分的 loadData 函数，这里的数据是 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']                                 
                                    );

【问题讨论】：

我绝对推荐你使用store.load函数。无需重新发明***。

【参考方案1】：

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

loadData 方法将数据数组直接加载到 Store。

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

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

代码片段

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

代码片段 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

代码片段

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);
);

【讨论】：

感谢 Narendra Jadhav 的回答，我已按照您的指示进行操作，但不幸的是它不起作用。我使用的是 extjs 3.0.0 版本。

好的 @rajib86 请看我已经用 ExtJS3.0 更新了我的答案。请参考这个FIDDLE