Question

我检索我的JSON，即：

{"data":[{"description":"","startDate":"2015-02-10","endDate":"[No end date]","tags":"NEW_SOURCE","value":"","name":"Lada"},{"description":"","startDate":"2015-02-10","endDate":"[No end date]","tags":"NEW_SOURCE","value":"","name":"Renault"},{"description":"Kilometrage","startDate":"2015-02-10","endDate":"2015-02-11","tags":"","value":"132","name":"Bmw"}],"success":true}

我用这种方式使用Ext-JS创建一个网格：

// Bla bla 
success:function(form, action){
    var result = Ext.JSON.decode(action.response.responseText);
    createGrid(result); 
}

function createStore(result){
    var store = Ext.create('Ext.data.JsonStore', {
        fields : ['description', 'startDate', 'endDate', 'tags', 'value', 'name'], 
        autoload : true, 
        proxy : {
            type : 'memory', 
            reader : {
                type : 'json', 
                root : 'data'
            }
        }
    });
    return store; 
}


function createGrid(result){

    var store = createStore(result); 

    var grid = Ext.create('Ext.grid.Panel', {
        title : "Records", 
        closable : true, 
        frame : true, 
        width : 600,
        renderTo : 'specificGridSummary', 
        store : store, 
        columns : [
          {header : 'Source',       dataIndex : 'name'}, 
          {header : 'Description',  dataIndex : 'description'},
          {header : 'Start date',   dataIndex : 'startDate'}, 
          {header : 'End date',     dataIndex : 'endDate'},
          {header : 'Value',        dataIndex : 'value'},
          {header : 'Tags',         dataIndex : 'tags'},          
        ]
    }); 

    grid.show(); 
}

JSON是正确的，我检查了几次文件。我也试过 createStore

 store.loadData(result)
 store.loadRaxData(result)

但我得到完全相同的问题。

编辑有些行没有任何内容，有些行有正确的项目。
见下图
How to fill the missing fields?

你觉得这个代码有问题吗？

谢谢！

Answer 1

具体问题是您不会将数据注入商店。在商店中添加：

data: result.data,

另一个问题：在具有内存代理的商店中有autoLoad。这将没有影响（和一个拼写错误，自动加载而不是autoLoad）。

更大的图片 你是从错误的一面接近这个。这就是你要做的：

ajax获取数据的请求
之后创建商店

这就是它的意思：

创建商店，定义如何读取数据
让商店获取自己的数据

查看MVC并更改您的代码：

Ext.define('App.store.Cars', {
    extend: 'Ext.data.JsonStore'
    fields : ['description', 'startDate', 'endDate', 'tags', 'value', 'name'], 
    autoLoad : true,

如果要发送参数以加载商店，请删除autoLoad。

    proxy : {
        type : 'ajax', 
        url: 'the url of your json',
        reader : {
            type : 'json', 
            root : 'data'
        }
    }
});

Ext.define('App.view.CarsGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.carsgrid',
    title : "Records", 
    closable : true, 
    frame : true, 
    width : 600,
    renderTo : 'specificGridSummary', 
    store : 'Cars', 
    columns : [
      {header : 'Source',       dataIndex : 'name'}, 
      {header : 'Description',  dataIndex : 'description'},
      {header : 'Start date',   dataIndex : 'startDate'}, 
      {header : 'End date',     dataIndex : 'endDate'},
      {header : 'Value',        dataIndex : 'value'},
      {header : 'Tags',         dataIndex : 'tags'},          
    ]
});

在控制器中：

function createGrid(date){
    var grid = Ext.widget('carsgrid');
    grid.getStore().filter({property: 'startDate', value: date, operator: '>'})
    grid.show()
}

我不确定你是否必须调用store.load（）或者是否自动完成。

请注意，商店必须具有Ajax代理才能从服务器加载数据。另请注意，一旦使用Ext.define定义，您就可以将商店称为字符串。由于网格具有alias，因此您还可以使用Ext.widget按名称创建它。

为此，您必须requires这些课程并使用Ext.Loader。

Answer 2

您可以尝试将商店中的数据属性设置为创建商店功能

中的结果

data: result,
.....

Answer 3

内存代理是只读的，使用此覆盖启用：

Ext.data.MemoryProxy.override({ updateOperation: function (operation, callback, scope) { console.log('updateOperation'); operation.setCompleted(); operation.setSuccessful(); Ext.callback(callback, scope || this, [operation]); }, create: function () { this.updateOperation.apply(this, arguments); }, update: function () { this.updateOperation.apply(this, arguments); }, destroy: function () { this.updateOperation.apply(this, arguments); } });

Extjs商店不适合JSON

3 个答案: