Ext.form.Panel load() 与 loadRecord()

Question

我在使用 json 请求响应加载表单面板时遇到奇怪的问题。在以前的项目中，我曾经使用 loadRecord(record) 从网格存储加载详细信息面板该商店具有关联的模型，因此记录的嵌入对象被映射到模型的属性，并且表单可以毫无问题地呈现这些字段。一旦我不得不使用 form.load() 的响应直接加载表单，我就看不到记录的嵌入对象的属性。例如来自 json

{
   "message":null,
   "success":true,
   "data":{
      "code":"1",
      "name":"Canon Canada",
      "modifiedBy":null,
      "modifiedAt":null,
      "address":{
         "street":"6390 Dixie",
         "suite":null,
         "city":"Mississauga",
         "provinceCode":"ON",
         "postalCode":"L5T1P7"
      },
    ...
   }
}

我看到呈现的 'code' 和 'name' 属性，但没有看到 'street' 和 'city'。

这是form.Panel代码

Ext.define('App.view.billto.BillToDetailForm' ,{
    extend  : 'Ext.form.Panel'
    ,layout: 'form'
    ,alias  : 'widget.BillToDetailForm'
    ,autoHeight: true
    ,bodyPadding: 10
    ,fieldDefaults: MainAppViewConfig.fieldDefaults
    ,defaults: {xtype: 'fieldcontainer',layout:'hbox', anchor: '100%'}
    ,items   : [    {   defaults: {xtype: 'textfield', allowBlank: false},
                items: [{name: 'code', fieldLabel:'Bill To Code'}
                    ,{name: 'name',fieldLabel: 'Name'}]}
            ,{  defaults: {xtype: 'textfield', allowBlank: false},
                items: [{name: 'address.suite', fieldLabel:'Suite'}
                    ,{name: 'address.street', fieldLabel:'Street'}]}
            ...         
        ]

    ,loadContentForCode: function(code){
        //this.getForm().trackResetOnLoad = true;
        this.getForm().load({   method: 'GET',url: 'billtoDetail',
                                params:{'code':code},
                                waitMsg: 'Loading...',
                                /*success:function(form, action) {
                                    console.log('BillToDetailForm:loadContentForCode callback on success '+this);
                                    var responseObj = Ext.JSON.decode(action.response.responseText,true);
                                    var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
                                    form.loadRecord(billToModel);
                                }*/
                    });
    }
});

如您所见，我什至尝试在成功处理程序中重新加载表单，但未成功。

我还注意到 var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data); 没有正确填充模型的字段 'street' 和 'city'。这也可能是问题的原因。

Ext.define('MPS.model.BillToModel', {
    extend: 'Ext.data.Model'
    ,idProperty:'code'
    ,fields: [
         {name: 'code', type: 'string'},
         {name: 'name', type: 'string'},
         {name: 'street',mapping:'address.street', type: 'string'},
         {name: 'city', mapping:'address.city', type: 'string'},
        ...
    ]
});

能否指出问题的真正原因或建议任何解决方案。谢谢。

Answer 1

我刚刚为你做了 fiddle。看看它是如何工作的，然后用你的代码试试：

Sencha Fiddle - How associated data works

如果这是您正在寻找的内容，请标记为已回答。

Ext.form.Panel load() 与 loadRecord()

Ext.form.Panel load() vs. loadRecord()

javascript

extjs

extjs4.2

extjs-mvc