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。您的本地数据也可能是JSON格式的JS对象。

你的网格也没有正确配置，只为我显示了第一行，我已经使用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"
           }]
}

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

1 个答案: