title: How to do Data binding in extjs 6
body: <p>i have json like this.</p>
  
  <pre><code>     firstName: 'xyz',
       comments : [{
          emailAddress : "abc@gmail.com", body : "PQR",
          emailAddress : "xyz@gmail.com", body : "XYZ",
       }]
  </code></pre>
  
  <p>i want to show firstName in the textfield which is editable. and want to show comments in the grid. i am not able to understand how to do it. please help me with that.</p>
  
  <p>my view is following:</p>
  
  <pre><code>    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}'&lt;-- 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}'&lt;---- how to bind this valuw to     textfield
              }
          }]
      }
  }    
  </code></pre>
  
  <p>});</p>
  
  <p>my view model is like this: </p>
  
  <pre><code>    Ext.define('StudentViewModel', {
         extend: 'Ext.app.ViewModel',
         alias:'viewmodel.StudentViewModel',
         requires: [
             'Student'
         ],
  
        stores: {
              orderStore: {
                autoLoad:true,
                type: 'sampleS'
              }
         }
      });
  </code></pre>
  
  <p>my model is like this:</p>
  
  <pre><code>    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' },
      ]
  });
  </code></pre>