将JSON字符串放入商店

时间:2014-02-27 01:02:38

标签: json extjs

这里的简单问题。我怎么能将这个JSON字符串放入Ext.data.Store?

   {
   "elements":[
      {
         "element":{
            "name":"value 1",
            "id":"element 1",
            "attributes":[
               {
                  "attrname":"id",
                  "attrvalue":"This is the ID"
               },
               {
                  "attrname":"name",
                  "attrvalue":"This is the name"
               },
               {
                  "attrname":"description",
                  "attrvalue":"This is the description"
               },
               {
                  "attrname":"table_name",
                  "attrvalue":"This is the table"
               }
            ]
         }
      }
   }

这是我的问题的简化版:Placing JSON response elements into a store- Ext JS

干杯!

1 个答案:

答案 0 :(得分:2)

由于JSON是从服务器返回的,因此您需要做的第一件事是将其从JSON格式的字符串反序列化为可以导航的对象。假设它是有效的JSON,你可以通过使用Ext.decode()来做到这一点。

这将给出一个在“elements”键上有一个对象数组的对象。只需遍历元素数组并创建一个可插入商店的新模型实例。

以下是实际示例的链接:https://fiddle.sencha.com/#fiddle/3u6

以下是该示例中的代码:

var data = YOUR_DATA_HERE,
var store = Ext.create('Ext.data.Store', {
    fields: ['id', 'name', 'description', 'table_name'],
    proxy: {
        type: 'memory'
    }
})
Ext.create('Ext.grid.Panel', {
    title: 'Test Data',
    store: store,
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Description',
        dataIndex: 'description'
    }, {
        text: 'Table Name',
        dataIndex: 'table_name'
    }],
    renderTo: Ext.getBody()
});
var decoded = Ext.decode( data );
// loop over decoded data
for( var i=0; i<decoded.elements.length; i++ ) {
    var element = decoded.elements[ i ].element;
    // set implicit model
    var model = {};
    // loop over attributes
    for( var x=0; x<element.attributes.length; x++ ) {
        var attribute = element.attributes[ x ];
        model[ attribute.attrname ] = attribute.attrvalue;
    }
    // implicitly cast data as Model
    store.add( model );
}