EXT Js复杂JSON响应处理：网格插入

您好，我正在尝试将JSON记录动态插入网格。 我的服务器响应如下：

{
    "studentDetails":{
        "status":"ACTIVE",
        "subject":"MATH",
        "paymentOptions":"EFT",
        "idStudent":71,
        "firstName":"Alli",
        "lastName":"Alli",
        "middleName":"Alli",
        "grade":"A",
        "kumonLevel":"FK",
        "parentId":68,
        "userId":1,
        "parentBean":{
            "parentFirstName":"Alli",
            "idParent":68,
            "parentMiddleName":"Alli",
            "parentLastName":"Alli",
            "parentEmailId":"haigopi@gmail.com",
            "parentPhoneNumber":"3173797945"},
        "startTimeSlot":"12:00 AM",
        "endTimeSlot":"12:15 AM",
        "dob":"2012-07-04"},
    "success":true
}

在上述响应中将parentDetails作为单独对象的学生

在我的客户处，我做了以下工作： 我有一个具有以下配置的网格：

var studentRecord = Ext.data.Record.create( [ {
    name : 'firstName',
    type : 'string'
}, {
    name : 'lastName',
    type : 'string'
}, {
    name : 'middleName',
    type : 'string'
}, {
    name : 'grade',
    type : 'string'
}, {
    name : 'kumonLevel',
    type : 'string'
}, {
    name : 'startTimeSlot',
    type : 'string'
}, {
    name : 'endTimeSlot',
    type : 'string'
}, {
    name : 'subject',
    type : 'string'
}, {
    name : 'dob',
    type : 'date'
}, {
    name : 'status',
    type : 'string'
}, {
    name : 'paymentOptions',
    type : 'string'
}, {
    name : 'parentFirstName',
    mapping : 'parentBean.parentFirstName',
    type : 'string'
}, {
    name : 'parentLastName',
    mapping : "parentBean['parentLastName']",
    type : 'string'
}, {
    name : 'parentMiddleName',
    mapping : 'parentBean.parentMiddleName',
    type : 'string'
}, {
    name : 'parentPhoneNumber',
    mapping : 'parentBean.parentPhoneNumber',
    type : 'String'
}, {
    name : 'parentEmailId',
    mapping : 'parentBean.parentEmailId',
    type : 'string'
} ]);

var myProxy = new Ext.data.HttpProxy( {
    method : 'GET',
    url : 'listActiveStudents.do'
});
var studentsListReader = new Ext.data.JsonReader( {
    successProperty : 'success',
    root : 'studentDetails',
    idProperty : 'idStudent'
}, studentRecord);

var studentDS = new Ext.data.Store( {
    proxy : myProxy,
    autoLoad : true,
    totalProperty : 'total',
    reader : studentsListReader
});

从服务器接收数据后，我执行了以下操作：

handler : function() {
    studentForm.getForm().submit({
        url : 'createStudent.do',
        waitMsg : 'Saving Data...',
        submitEmptyText : false,
        success : function(form, action) {
            win.close();
            var studentDetail = action.result.studentDetails;
            var xyz = new studentDS.recordType(studentDetail, 0);
            studentDS.insert(0,xyz);
        }
    });
}

我现在面临的问题是：

插入记录时，parentDetails不会显示在网格中。似乎，插入时映射工作不正常。其中，当加载网格时，它会进行完美渲染。我创建了记录，它在firefox debbuger中也显示了有效值

---

谁能给我指点一下吗？

这是一个非常棘手的问题。但我发现了一个简单（但不干净）的解决方案，您只需编辑创建记录的行，如下所示：

var xyz = new studentDS.recordType(studentDetail, 0);

为此：

var xyz = new studentDS.recordType(
    studentDS.reader.extractValues(
        studentDetail, 
        studentDS.fields.items,
        studentDS.fields.length
    ), studentDetail.idStudent); //use the idStudent of the studentDetail, so the id of the newly created record equals to your idStudent

---

以下是原因

因此，在跟踪调用堆栈之后，我发现从

存储中加载的记录与通过
新students.recordType
创建的记录之间有一个有趣的差异

看看这些区别：

//This is the record created from Store Load event
    dob: Wed Jul 04 2012 00:00:00 GMT+0800 (Malay Peninsula Standard Time)
    endTimeSlot: "12:15 AM"
    firstName: "Alli"
    grade: "A"
    kumonLevel: "FK"
    lastName: "Alli"
    middleName: "Alli"
    parentEmailId: "haigopi@gmail.com"
    parentFirstName: "Alli"
    parentLastName: "Alli"
    parentMiddleName: "Alli"
    parentPhoneNumber: "3173797945"
    paymentOptions: "EFT"
    startTimeSlot: "12:00 AM"
    status: "ACTIVE"
    subject: "MATH"
    __proto__: Object

//This is the record created from your studentDS.recordType
    dob: "2012-07-04"
    endTimeSlot: "12:15 AM"
    firstName: "Alli"
    grade: "A"
    idStudent: 80
    kumonLevel: "FK"
    lastName: "Alli"
    middleName: "Alli"
    parentBean: Object
        idParent: 68
        parentEmailId: "haigopi@gmail.com"
        parentFirstName: "Alli"
        parentLastName: "Alli"
        parentMiddleName: "Alli"
        parentPhoneNumber: "3173797945"
        __proto__: Object
    parentId: 68
    paymentOptions: "EFT"
    startTimeSlot: "12:00 AM"
    status: "ACTIVE"
    subject: "MATH"
    userId: 1
    __proto__: Object

事实上，当您加载数据时，您的
JsonStore
和
JsonReader
对加载的数据进行了恶意攻击。它们将数据线性化。它们将您的所有数据从
parentBean
移动到
记录的根目录。data
，因此在渲染网格时，可以正确渲染网格

要了解它们是如何呈现网格的，请查看GridView.js的第827行的代码

meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);

请注意GridView是如何捕获这些值的。他们使用
record.data[column.name]
来获取每个字段的值，这就是所有
parent*
报告未定义的地方

为了了解它们是如何线性化代码的，您可以查看DataReader.js的第157行

var record = new Record(this.extractValues(n, fi, fl), this.getId(n));
//where:
//n = your raw json object
//fi = the field items
//fl = the field length

事实上，他们在这里使用的
新记录
与您的
新学生的.recordType
相同，只是他们代表您提取值

，显然您没有这样做，因为这样做并不明显

---

明白了吗？希望解释足够清楚。

有两件事：您确定

提交（）中的
action.result.studentDetails
返回您想要的确切json对象吗？console.log。第二件事是，通常在创建网格时，我使用RestStore，所有CRUD都由存储本身处理。我不需要以这种方式手动插入一行来更新网格。更糟糕的是，您可能需要在每次插入新数据时刷新网格。谢谢。我怎么会错过这条线。当我正确地绘制地图时，这项工作就开始了。再次感谢Lionel Chan。