如何做在extjs數據綁定6

Question

我有這樣的json。

 firstName: 'xyz', 
    comments : [{ 
     emailAddress : "abc@gmail.com", body : "PQR", 
     emailAddress : "xyz@gmail.com", body : "XYZ", 
    }] 

我想在可編輯的文本字段中顯示firstName。並希望在網格中顯示評論。我無法理解如何去做。請幫助我。

我的觀點是下列：

Ext.define("SampleView", { 
     extend: "Ext.panel.Panel", 
     alias: 'widget.sample', 
     id : 'sampleVId', 
     requires: ['StudentViewModel'], 
     viewModel: { 
      type: 'StudentViewModel' 
     }, 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 

    initComponent: function() { 
    Ext.apply(this, { 
     items: [this.form(), this.grid()],   
    }); 
    this.callParent(arguments); 
}, 

grid: function(){ 
    return { 
     xtype: 'grid', 
     reference: 'samplegrid', 
     id : 'samplegridId', 
     bind: { 
      store: '{comment}'<-- not able to do the binding 
     }, 
     flex:1, 
     margin: 10, 
     plugins: { 
      ptype: 'rowediting', 
      clicksToEdit: 2 
     }, 
     columns: [{ 
      text: 'Email', 
      dataIndex: 'email', 
      flex: 1, 
      editor: { 
       allowBlank: false 
      } 
     }, { 
      text: 'Role', 
      dataIndex: 'body', 
     }], 
     } 
    } 
}, 


form : function(){ 
    return{ 
     xtype : 'form', 
     items:[{ 
      xtype: 'textfield', 
      fieldLabel: 'First Name', 
      bind: { 
       value: '{firstName}'<---- how to bind this valuw to  textfield 
      } 
     }] 
    } 
}  

}）;

我的視圖模型是這樣的：

Ext.define('StudentViewModel', { 
     extend: 'Ext.app.ViewModel', 
     alias:'viewmodel.StudentViewModel', 
     requires: [ 
      'Student' 
     ], 

     stores: { 
      orderStore: { 
       autoLoad:true, 
       type: 'sampleS' 
      } 
     } 
    }); 

我的模式是這樣的：

Ext.define('Student', { 
     extend: 'Ext.data.Model', 
     idProperty: 'Id', 
     schema: { 
      namespace: 'sample', 
      proxy: { 
       type:'ajax', 
       url: 'users.json', 
       reader:{ 
       type:'json', 
       rootProperty:'data' 
      } 
     } 
    }, 
    fields: [ 
     { name: 'Id', type: 'int' }, 
     { name: 'firstName', type: 'string' }, 
    ] 
}); 

Answer 1

你的綁定將必須根據選擇的記錄。

您的學生模型需要定義hasMany對評論模型的引用，以便構建合適的商店以進行綁定，否則您將不得不基於模型中的數組數據動態創建商店。我會建議使用一個關係，從長遠來看它更容易實現。

，你必須在的

value: {firstName} 

應該

value: {student.firstName} 

在您的視圖控制器綁定，你將不得不學生綁定到你正在嘗試使用的形式來顯示學生模型看起來像

vm.setValue('student', YOURMODELOBJECTHERE); 

如果學生模型有一個適當的有很多relatio n的意見，然後其餘的應該沒問題。