Extjs 存储数据模型子字段空错误答案

【问题标题】：Extjs Store DataModel Subfield Null ErrorExtjs 存储数据模型子字段空错误
【发布时间】：2013-04-01 09:21:34
【问题描述】：

当我尝试将远程数据加载到网格时，子字段出现此错误：

Cannot read property 'id' of null

我的数据模型：

    Ext.define('ruleDataModel', {
        extend: 'Ext.data.Model',
        fields: [
           { name: 'id'},
           { name: 'createTime', type:'date', dateFormat: 'timestamp', convert:function(v,j){ return (v != null?new Date(v):null);}},
           { name: 'discountPercent'},
           { name: 'discountAmount'},
           { name: 'discountOverSalePriceFlag', type: 'boolean'},
           { name: 'minSalePriceTotal'},
           { name: 'maxCount'},
           { name: 'execOrder'},
           { name: 'clearanceIncludedFlag', type: 'boolean'},
           { name: 'relatedProductMinCount'},
           { name: 'promocodeRuleTypeName', mapping: 'promocodeRuleType.friendlyType'},
           { name: 'groupName'},
           { name: 'productTypeId', mapping: 'productType.id', defaultValue: ''},
           { name: 'productTypeName', mapping: 'productType.name', defaultValue: ''},
           { name: 'relatedProductTypeId', mapping: 'relatedProductType.id', defaultValue: ''},
           { name: 'relatedProductTypeName', mapping: 'relatedProductType.name', defaultValue: ''}
        ], 
        idProperty: 'id'
    });

返回的 JSON 数据：

{totalCount: 1, root: [{"productType": {"name":
...
"relatedProductType":null,
...
"execOrder":0,"id":11}]}

【问题讨论】：

标签： extjs null store datamodel

【解决方案1】：

检查以下事项：

检查模型的命名空间。是只有ruleDataModel 还是类似于foo.bar.ruleDataModel？
可能您的 json 有问题。有一种简单的方法可以测试 json 是否正确。将该 json 保存在 .json 文件中，然后在浏览器中打开该文件。如果浏览器能够正确打开那个 json 文件，那么你的 json 是正确的，否则不是。

【讨论】：

1.它只是 ruleDataModel，当“relatedProductType”不为空时它运行完美...... 2. Json 是绝对正确的，我用 JSON 查看器尝试过，它显示正确。 3. 一般情况下，“映射”的使用可以防止 Extjs 报错。但是，在这种情况下，我总是会遇到同样的错误......

【解决方案2】：

对于子字段，DataModel 应该这样定义：

Ext.define('ruleDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               { name: 'id'},
               { name: 'createTime', type:'date', dateFormat: 'timestamp', convert:function(v,j){ return (v != null?new Date(v):null);}},
               { name: 'discountPercent'},
               { name: 'discountAmount'},
               { name: 'discountOverSalePriceFlag', type: 'boolean'},
               { name: 'minSalePriceTotal'},
               { name: 'maxCount'},
               { name: 'execOrder'},
               { name: 'clearanceIncludedFlag', type: 'boolean'},
               { name: 'relatedProductMinCount'},
               { name: 'promocodeRuleTypeName', mapping: 'promocodeRuleType.friendlyType'},
               { name: 'groupName'},
               { name: 'productType.id', mapping: 'productType', convert:function(v,j) { console.log(v,j); return (v != null?v.id:"");}},
               { name: 'productType.name', mapping: 'productType', convert:function(v,j) { console.log(v,j); return (v != null?v.name:"");}},
               { name: 'relatedProductType.id', mapping: 'relatedProductType', convert:function(v,j) { console.log(v,j); return (v != null?v.id:"");}},
               { name: 'relatedProductType.name', mapping: 'relatedProductType', convert:function(v,j){ console.log(v,j); return (v != null?v.name:"");}}
            ], 
            idProperty: 'id'
        });

区别是

正确的一个：

{ name: 'productType.id', mapping: 'productType', convert:function(v,j) { console.log(v,j); return (v != null?v.id:"");}},

错一个：

{ name: 'productTypeId', mapping: 'productType.id', defaultValue: ''}

【讨论】：