grid-json 数据在 extjs 3.4 中不起作用

Question

我正在尝试使用 Jsonstore。我无法在网格中显示数据，正在显示很多空行。

我想在网格中显示 testString 变量中的数据。 帮我解决这个问题？

     var testString = new String();
     testString = Ext.util.JSON.encode(data);

这是testString中的值

    //value Of testString:  //[{"dc1":"abcd","dc2":"efg","dc3":"abc","dc4":"abc"}];

存储和网格

    var dcStore = new Ext.data.JsonStore({
        autoLoad: true,
        fields: ['dc1','dc2','dc3','dc4'],
        data : testString
    });


    this.dcGrid = new Ext.grid.GridPanel({
        title: 'View',
        store: dcStore,
        columns:[
              {header: 'dc1',dataIndex: 'dc1'},
              {header: 'dc2', dataIndex: 'dc2'},
              {header: 'dc3', dataIndex: 'dc3'},
              {header: 'dc4',dataIndex: 'dc4'}
         ]
        }); 

如果我像这样直接将值分配给testString，数据将显示在网格中

var testString = [{"dc1":"abcd","dc2":"efg","dc3":"abc","dc4":"abc"}];

小提琴更新：

Ext.application({
    name : 'Fiddle',
   launch : function() {
        var testData = {"data":[{"dc1":"re","dc2":"we","dc3":"qw","dc4":"qwe"}]};
        var testDataJson = Ext.util.JSON.decode(testData);
        var testDataString = Ext.util.JSON.encode(testDataJson);
        var dcStore = new Ext.data.JsonStore({
            fields: ['dc1','dc2','dc3','dc4'],
            data : testDataString
        });
       var dcGrid = new Ext.grid.GridPanel({
            renderTo: Ext.getBody(),
            title: 'View',
            store: dcStore,
            columns:[
                  {header: 'dc1',dataIndex: 'dc1'},
                  {header: 'dc2', dataIndex: 'dc2'},
                  {header: 'dc3', dataIndex: 'dc3'},
                  {header: 'dc4',dataIndex: 'dc4'}
             ]
            }); 
        }
});

Answer 1

JsonStores 通常用于从远程源以 JSON 格式拉取数据，这可以来自 AJAX 请求或直接到 JSON 文件，然后读取器将这些信息解析到存储中。如果您已经在本地拥有数据，那么使用 ArrayStore 可能会更好。此外，您的本地数据可能已经作为其 JS 对象采用 JSON 格式。

另外，您的网格配置不正确，只为我显示了第一行，我使用了 API 文档 here 中的 GridPanel 示例代码。

如果不知道这行代码testString = Ext.util.JSON.encode(data); 中的数据变量中的内容，我无法直接解决您的问题，所以我在下面放置了一个同时使用数组存储和远程 JSON 存储的示例供您参考，这应该会有所帮助。

// app.js
Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = '/js/ext-3.4.0/resources/images/default/s.gif';

    var arrayData = [
        ["abc", "abc", "abc", "abc"],
        ["abc1", "abc1", "abc1", "abc1"],
        ["abc2", "abc2", "abc2", "abc2"],
        ["abc3", "abc3", "abc3", "abc3"],
        ["abc4", "abc4", "abc4", "abc4"]
    ];

    var arrayStore = new Ext.data.ArrayStore({
        // store configs
        autoDestroy: true,
        storeId: 'myStore',
        fields: ['dc1', 'dc2', 'dc3', 'dc4'],
        data: arrayData
    });

    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        store: arrayStore,
        colModel: new Ext.grid.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                {id: 'dc1', header: 'dc1', width: 200, sortable: true, dataIndex: 'dc1'},
                {header: 'dc2',  dataIndex: 'dc2'},
                {header: 'dc3',  dataIndex: 'dc2'},
                {header: 'dc4',  dataIndex: 'dc2'}
            ]
        }),
        viewConfig: {
            forceFit: true
        },
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        width: 600,
        height: 300,
        frame: true,
        title: 'Framed with Row Selection and Horizontal Scrolling',
        iconCls: 'icon-grid'
    });

    var jsonStore = new Ext.data.JsonStore({
        // store configs
        autoDestroy: true,
        autoLoad: true,
        url: 'data/data.json',
        storeId: 'myStore',
        // reader configs
        root: 'rows',
        idProperty: 'dc1',
        fields: ['dc1', 'dc2', 'dc3', 'dc4'],
    });

    var grid2 = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        store: jsonStore,
        colModel: new Ext.grid.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                {id: 'dc1', header: 'dc1', width: 200, sortable: true, dataIndex: 'dc1'},
                {header: 'dc2',  dataIndex: 'dc2'},
                {header: 'dc3',  dataIndex: 'dc2'},
                {header: 'dc4',  dataIndex: 'dc2'}
            ]
        }),
        viewConfig: {
            forceFit: true
        },
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        width: 600,
        height: 300,
        frame: true,
        title: 'Framed with Row Selection and Horizontal Scrolling',
        iconCls: 'icon-grid'
    });
});

// data.json
{
  "rows": [{
             "dc1": "abc",
             "dc2": "abc",
             "dc3": "abc",
             "dc4": "abc"
           }, {
             "dc1": "test1",
             "dc2": "abc",
             "dc3": "abc",
             "dc4": "abc"
           }, {
             "dc1": "test 2",
             "dc2": "abc",
             "dc3": "abc",
             "dc4": "abc"
           }]
}