如何嵌套模型加載到使用loadRecord

Question

我創建了一個腳本動態生成的形式，但我有加載嵌套模型的數據問題ExtJS的形式。我試過加載整個記錄，我嘗試加載每個子存儲，但都不起作用。

我大約用form.load（）已經，但是從我的理解是需要代理連接，並且還需要存儲一個「數據」數組中的JSON數據。

有沒有人對我如何解決這個問題有什麼建議？

<div id="view-@pageSpecificVar" class="grid-container even"></div> 
<div id="button"></div> 
<script> 

    Ext.define('HeaderForm', { 
     extend: 'Ext.form.Panel', 
     initComponent: function() { 
      var me = this; 
      Ext.applyIf(me, { 
       id: Ext.id(), 
       defaultType: 'textfield' 
      }); 
      me.callParent(arguments); 
     } 
    }); 

    // Define our data model 
    Ext.define('HeaderModel', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'HeaderSequence', type: 'int'} 
     ], 
     hasMany:[ 
      { name: 'Columns', model: 'ColumnModel' } 
     ], 
     proxy: { 
      type: 'ajax', 
      actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' }, 
      url: '@Url.Content("~/Test/Header")', 
      timeout: 1200000, 
     }, 
    }); 

    Ext.define('ColumnModel', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'ColumnWidth', type: 'float'} 
     ], 
     hasMany:[ 
      { name: 'Fields', model: 'FieldModel'} 
     ], 
     belongsTo: 'HeaderModel' 
    }); 

    Ext.define('FieldModel', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'XType', type: 'string'}, 
      { name: 'FieldLabel', type: 'string'}, 
      { name: 'Name', type: 'string'}, 
      { name: 'Data', type: 'string'}, 
      { name: 'FieldSpecify', type: 'bool'} 
     ], 
     belongsTo: 'ColumnModel' 
    }); 

    var store = Ext.create('Ext.data.Store', { 
     storeId: 'HeaderStore', 
     model: 'HeaderModel', 
     autoDestroy: true, 
     listeners: { 
      load: function (result, records, successful, eOpts) { 
       //console.log(result); 
       var form = dynamicForm(records[0]); 
       form.add(submitButton); 
       form.render('view-@pageSpecificVar'); 
      } 
     } 
    }); 

    store.load(); 

    var dynamicForm = function(record) { 

     var form = new HeaderForm(); 
     var columnContainer = new Ext.widget({ 
      xtype: 'container', 
      layout: 'column' 
     }); 
     var formItems = new Ext.util.MixedCollection(); 

     Ext.each(record.ColumnsStore.data.items, function(item) { 

      Ext.iterate(item.data, function (key, value) { 


       var fieldContainer = new Ext.widget({ 
        xtype: 'container', 
        columnWidth: value 
       }); 

       Ext.each(item.FieldsStore.data.items, function(item) { 
        if(item.data["FieldSpecify"]) { 
         fieldContainer.add(new Ext.widget({ 
          xtype: item.data["XType"], 
          fieldLabel: item.data["FieldLabel"], 
          name: item.data["Name"], 
          //value: item.data["Name"] 
         })); 
        } 
       }, this); 

       columnContainer.add(fieldContainer); 

      }, this); 

     }, this); 

     formItems.add(columnContainer); 

     form.add(formItems.items); 

     Ext.each(record.ColumnsStore.data.items, function(item) { 
      Ext.each(item.FieldsStore.data.items, function(fields) { 
       form.loadRecord(fields); 
      }); 
     }); 

     //form.loadRecord(record); 

     return form; 
    }; 

    var submitButton = new Ext.widget({ 
     xtype: 'toolbar', 
     dock: 'bottom', 
     items:[{ 
      xtype: 'button', 
      text: 'Save', 
      handler: function(button) { 
       var basic = button.up('form').form; 
       basic.updateRecord(basic.getRecord()); 
       var store = Ext.StoreMgr.get('HeaderStore'); 
       store.each(function(record) { 
        record.dirty = true; 
       }); 
       store.sync(); 
      } 
     }] 
    }); 

</script> 

更新 對不起，我可能沒有說得很清楚。我在將商店數據加載到表單域時遇到問題。對於靜態的形式我通常使用loadRecord到嵌套模型加載到一種形式，但在這種情況下，所有的字段嵌套在自己的小模型，所以會有每個嵌套模型值加載到自己的領域與方式loadRecord？

HeaderModel存儲字段集信息。

ColumnModel的目的是創建將圍繞一組字段，爲造型的目的容器。它只是創建兩列字段。

的FieldModel存儲字段特定屬性和數據。

這裏的響應JSON數據的例子...

{ 
"HeaderSequence":1, 
    "Columns":[{ 
     "ColumnWidth":0.5,"Fields":[ 
      {"XType":"textfield","FieldLabel":"FieldA","Name":"NameA","Data":"A","FieldSpecify":true}, 
      {"XType":"textfield","FieldLabel":"FieldB","Name":"NameA","Data":"B","FieldSpecify":true}] 
     },{ 
     "ColumnWidth":0.5,"Fields":[ 
      {"XType":"textfield","FieldLabel":"FieldA2","Name":"NameA2","Data":"A2","FieldSpecify":true}, 
      {"XType":"textfield","FieldLabel":"FieldB2","Name":"NameB2","Data":"B2","FieldSpecify":true}] 
     } 
] 

}

感謝

Answer 1

我想出瞭如何將嵌套模型加載到窗體中。我們不能簡單地使用load或loadRecord，因爲默認情況下，該方法嘗試獲取模型的數據並遍歷數據對象並調用setValues。

我要做的是手動得到基本的表單元素，並調用setValues方法自己來分配值。

 // loop through each field store to load the data into the form by field id 
     Ext.each(record.ColumnsStore.data.items, function(item) { 
      Ext.each(item.FieldsStore.data.items, function(fields) { 
       form.getForm().setValues([{ id: fields.data['Id'], value: fields.data['DisplayName'] }]); 
      }); 
     }); 

爲了跟上這一點，一個自定義提交處理程序也需要放置到位。 在同步存儲之前，它通過存儲循環並設置提交的值以進行存儲。

// define form submit button 
    var submitButton = new Ext.widget({ 
     xtype: 'toolbar', 
     dock: 'bottom', 
     items:[{ 
      xtype: 'button', 
      text: 'Save', 
      handler: function(button) { 
       // get basic form for button 
       var basic = button.up('form').form; 
       // get form submit values 
       var formSubmitValues = basic.getValues(); 
       // get header store 
       var store = Ext.StoreMgr.get('HeaderStore'); 
       // loop through each field store and update the data values by id from the form 
       store.each(function(record) { 
        Ext.each(record.ColumnsStore.data.items, function(item) { 
         Ext.each(item.FieldsStore.data.items, function(fields) { 
          fields.data['Data'] = formSubmitValues[fields.data['Id']]; 
         }); 
        }); 
        // mark the record as dirty to be sync 
        record.dirty = true; 
       }); 
       // sync store object with the database 
       store.sync(); 
      } 
     }] 
    }); 

Answer 2

看一看如何嵌套的數據加載到一個嵌套的模型this和this例子。您還將看到如何訪問關聯的數據。

我不知道你爲什麼使用record.ColumnsStore.data.items，好像記錄是HeaderModel類型，你應該通過record.Columns真正獲得列存儲，然後迭代那個存儲。

這也有助於瞭解您的服務器返回的JSON。