json - EXT Js 复杂 JSON 响应处理 : Grid Insertion

Question

您好，我正在尝试将 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);
        }
    });
}

我在这里面临的问题是:

插入记录时，父详细信息未显示在网格中。似乎，映射在插入时无法正常工作。最初加载网格时，它呈现完美。我创建了在 firefox debbuger 中也显示有效值的记录。

有人可以指导我吗？

Answer 1

这是一个非常棘手的问题。但我找到了一个简单(但很脏)的解决方案，您只需编辑创建记录的行，从这里开始:

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

---

这就是原因

跟踪调用堆栈后，我发现从 Store 加载的记录与通过 new studentDS.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 移动到 record.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

事实上，他们在这里使用的 new Record 与您的 new studentDS.recordType 相同，只是他们为您 extractValues代表，显然你没有这样做，因为这样做并不明显。

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