我们如何将json字符串加载到extjs4 arraystore中?

时间:2015-12-11 10:32:33

标签: java json extjs

这是我的模特: -

Ext.define('attributeModel', {
    extend   : 'Ext.data.Model',
    fields   : ['attributeName']     
    idProperty: 'attributeName'
});
Ext.define('entityModel', {
    extend   : 'Ext.data.Model',
    fields   : ['entityName']     
    idProperty: 'entityName',
    hasMany: {model: 'attributeModel', name:  'attributes'}
});

这是我的商店: -

Ext.define('entityStore', {
extend      : 'Ext.data.ArrayStore',
model       : 'entityModel',
storeId:'entityStoreId',
proxy: {
      type: 'memory',
      reader: {
           type: 'json'
       }
    }

});

这些是我在Java中的Bean类: -

EntityVO.java

import java.util.ArrayList;

public class EntityVO { 

 private String entityName;
 private ArrayList<AttributeVO> attrList;

 public ArrayList<AttributeVO> getAttrList() {
    return attrList;
 }
 public void setAttrList(ArrayList<AttributeVO> attrList) {
    this.attrList = attrList;
 }
 public String getEntityName() {
    return entityName;
 }
 public void setEntityName(String entityName) {
    this.entityName = entityName;
 }          
}

AttributeVO.java

 public class AttributeVO{  

  private String attributeName;
  public String getAttributeName() {
     return attributeName;
  }
  public void setAttributeName(String attributeName) {
    this.attributeName = attributeName;
  }         
}

我在EntityVO填写java个值,我正在使用json创建一个ObjectMapper字符串,并将其作为response发送给Extjs }。

当我在json解码我的extjs字符串并将其设置为entityStore时,它没有加载任何数据,也没有抛出任何错误。有没有什么办法可以将bean中存在的数据加载到extjs商店?

var store = Ext.create('entityStore');
store.loadData(responseJson); //not working 

json回复:

{
"entityList": [{
    "entityName": "entity1",
    "attrList": [{
        "attributeName": "attr1"
    }, {
        "attributeName": "attr2"
    }]
}, {
    "entityName": "entity2",
    "attrList": [{
        "attributeName": "attr1"
    }]
}]

}

2 个答案:

答案 0 :(得分:0)

可能是你从ajax请求的回调方法中得到了 responseJson 。如果是这样,请尝试;

var resp = Ext.JSON.decode(responseJson.responseText);
store.loadData(resp);

您似乎忘了定义商店的root属性。你可以在商店定义中指定你的root属性;

  reader: {
       type: 'json',
       root: 'entityList'
   }

或者你可以传递这样的价值;

store.loadData(resp.entityList);

答案 1 :(得分:0)

首先,你需要解码json有效载荷

var resp = Ext.JSON.decode(responseJson.responseText);

在商店中添加元素所需的下一个操作(即'Ext.data.ArrayStore')就是使用“添加”命令

store.add(resp);

这是一个非常简单的小提琴示例 https://fiddle.sencha.com/#fiddle/12f7

小提琴代码:

Ext.define('attributeModel', {
extend: 'Ext.data.Model',
fields: ['attributeName'],
idProperty: 'attributeName'
});

Ext.define('entityModel', {
extend: 'Ext.data.Model',
fields: ['entityName'],
idProperty: 'entityName',
hasMany: {
    model: 'attributeModel',
    name: 'attributes'
}
});


Ext.define('entityStore', {
extend: 'Ext.data.ArrayStore',
model: 'entityModel',
storeId: 'entityStoreId',
proxy: {
    type: 'memory',
    reader: {
        type: 'json'
    }
}
});

Ext.application({
name: 'Fiddle',
launch: function() {
    var store = Ext.create('entityStore');
    var jsonStr = JSON.stringify({
        "entityList": [{
            "entityName": "entity1",
            "attrList": [{
                "attributeName": "attr1"
            }, {
                "attributeName": "attr2"
            }]
        }, {
            "entityName": "entity2",
            "attrList": [{
                "attributeName": "attr1"
            }]
        }]

    });
    var resp = Ext.JSON.decode(jsonStr);
    var countBefore = store.count();
    store.add(resp);
    var countAfter = store.count();
    Ext.Msg.alert('Fiddle', 'store before add count: ' + countBefore + ', now: ----' + countAfter + ' ' + JSON.stringify(store.getAt(0).data));

}
});