Comment faire une liaison de données dans extjs 6

Question

J'ai json comme ça.

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

Je veux montrer firstName dans le champ de texte qui est éditable. et je veux montrer des commentaires dans la grille. Je ne suis pas capable de comprendre comment le faire. aidez-moi s'il vous plaît avec ça.

mon avis suit:

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 
      } 
     }] 
    } 
}  

});

mon modèle de vue est comme ceci:

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

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

mon modèle est comme ceci:

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

Votre liant devrait être basée sur l'enregistrement sélectionné.

Votre modèle pour étudiant doit être défini pour avoir une référence hasMany à un modèle de commentaires afin qu'un magasin approprié soit construit pour être lié, ou vous deviez créer dynamiquement un magasin basé sur les données de tableau dans le modèle. Je suggère simplement d'utiliser une relation, c'est plus facile à faire à long terme.

où vous avez la liaison de

value: {firstName} 

Il devrait être

value: {student.firstName} 

Dans votre contrôleur de vue vous devez lier étudiant au modèle de l'étudiant que vous essayez d'afficher sous la forme à l'aide une ligne qui ressemble à

vm.setValue('student', YOURMODELOBJECTHERE); 

Si le modèle d'étudiant a un bon a beaucoup de relatio n pour les commentaires, alors le reste devrait être bon.