Как сделать привязку данных в 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); 

Если у модели ученика есть надлежащее место, n для комментариев, тогда остальное должно быть в порядке.