如何在Extjs商店读者中读取这个json字符串?

时间:2013-10-18 04:39:40

标签: javascript extjs extjs4

我有这个json字符串看起来像:

[{
        "totalCount" : 134
    }, {
        "items" : [{
                "id" : 1669,
                "check" : false,
                "name" : "1800mm趟门衣柜",
                "part_number" : "DP101669"
            }, {
                "id" : 1670,
                "check" : false,
                "name" : "1800mm趟门衣柜",
                "part_number" : "DP101670"
            }, {
                "id" : 1671,
                "check" : false,
                "name" : "2118mm趟门衣柜",
                "part_number" : "DP101671"
            }, {
                "id" : 1672,
                "check" : false,
                "name" : "2118mm趟门衣柜",
                "part_number" : "DP101672"
            }, {
                "id" : 1673,
                "check" : false,
                "name" : "1800mm趟门衣柜",
                "part_number" : "DP101673"
            }, {
                "id" : 1674,
                "check" : false,
                "name" : "1800mm趟门衣柜",
                "part_number" : "DP101674"
            }, {
                "id" : 1675,
                "check" : false,
                "name" : "1800mm趟门衣柜",
                "part_number" : "DP101675"
            }, {
                "id" : 1676,
                "check" : false,
                "name" : "1800mm趟门衣柜",
                "part_number" : "DP101676"
            }, {
                "id" : 1677,
                "check" : false,
                "name" : "2118mm趟门衣柜",
                "part_number" : "DP101677"
            }, {
                "id" : 1678,
                "check" : false,
                "name" : "2118mm趟门衣柜",
                "part_number" : "DP101678"
            }
        ]
    }
]

我的商店看起来像:

var item_store = Ext.create('Ext.data.Store', {

    model:'ItemModel',
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: 'ajax',
        reader: {
            type:'json',
            root: 'items',
            totalProperty: 'totalCount'
        },
        url: 'item_access.jsp?fullpage=true&item_cat=167&group_id='+groupId

    }
});

但它无法读取商店的根节点,现在我的表看起来像这样: 只有两个空行, 看起来像节点totalCount和items:

enter image description here

那么如何配置阅读器来读取该字符串?

这是我的网格:

    var itemPanel=Ext.create('Ext.grid.Panel', {

    id: 'item-panel',
    title: '产品',
    store: item_store,
    columns: [
        { header: 'id',  dataIndex: 'id' , flex: 1 },
        { header: 'part_number',  dataIndex: 'part_number' , flex: 2 },
        { header: 'name', dataIndex: 'name', flex: 3 },
        { xtype: 'checkcolumn',header: '可见', dataIndex: 'check' , flex: 2 ,
        listeners:{
                 checkchange: function(col, idx, isChecked) {
                    var view = itemPanel.getView(),
                        record = view.getRecord(view.getNode(idx));
                        postData(record.get('id'),"ITEM",isChecked);

                }
            }
        }

    ],
     region: 'center',
     layout: 'card',

    // paging bar on the bottom
    bbar: Ext.create('Ext.PagingToolbar', {
        store: item_store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        items:[
            '-', {
            text: 'Show Preview',
            pressed: pluginExpanded,
            enableToggle: true,
            toggleHandler: function(btn, pressed) {
                var preview = Ext.getCmp('gv').getPlugin('preview');
                preview.toggleExpanded(pressed);
            }
        }]
    }),
});

我的模特:

Ext.define('ItemModel', {
    extend : 'Ext.data.Model',
    idProperty : 'id',
    fields : [{
            name : "name",
            convert : undefined
        }, {
            name : "id",
            type : types.INT
        }, {
            name : "part_number"
        }, {
            name : "check",
            type : types.BOOLEAN
        }

    ]

});

2 个答案:

答案 0 :(得分:2)

在4.x系列中,您可以传递root / total的函数:

totalProperty: function(data) {
    return data[0].totalCount
},
root: function(data) {
    return data[1].items
}

答案 1 :(得分:1)

如果可能,您可以更改数据结构:

{ "totalCount": 134, "items": [] }

修改

我使用版本4.2.0.663中的ext-all-debug.js设置了一个快速测试,与JsFiddle相同。乍一看,问题来自第41343行:

root = Ext.isArray(data) ? data : me.getRoot(data);

此时getRoot - 以某种方式引用root属性 - 未被调用,因为data是一个数组。这不是一个错误。我宁愿认为你滥用JSON阅读器,它被设计为不将数组视为配置结构,而是作为记录列表。很抱歉重复这个,但你最好用上面提到的对象替换数组。如果不可能,您将不得不对框架进行一些更改,以使其符合您的需求。