title: Creating dependent extjs grids
body: <p>I just started to study extjs 6.
  How it is possible to implement dependent grids when the main displays data from the table, when clicked on, in the second grid, the dependent entries from the second table are displayed.</p>
  
  <p>What I realized at the moment:
  I created a grid, I get the records from the "Operation" table, I call it using the CRUD. In the "Operation" table, all entries are associated with the second table (numoperation) in the code field.</p>
  
  <p>It is required to me that at pressing on record of the main grid which is already created, to receive dependent records from the table numoperation in the second grid.</p>
  
  <p>How can this be implemented in general?
  I would be glad if you share useful links, tips or examples.
  Thank you in advance.</p>
  
  <p>Below is the code for the client part of the application:</p>
  
  <pre><code>Ext.onReady(function () {
  
  Ext.define('Operation', {
      extend: 'Ext.data.Model',
      idProperty: 'id',
      fields: [
          { name: 'id', type: 'int' },
          'date_op',
          'code',
          'status',
          'type'
      ]
  });
  
  var urlRoot = 'data?model=Operation&amp;method=';
  
  var registrStore = Ext.create('Ext.data.Store', {
      model: 'Operation',
      pageSize: 10,
      proxy: {
           type: 'jsonp',
          noCache: false,
          api: {
              create:     urlRoot + 'Create',
              read:       urlRoot + 'Read',
              update:     urlRoot + 'Update',
              destroy:    urlRoot + 'Destroy'
          },
          reader: {
              type: 'json',
              metaProperty: 'meta',
              root: 'data',
              idProperty: 'id',
              totalProperty: 'meta.total',
              successProperty: 'meta.success'
          },
          writer: {
              type: 'json',
              encode: true,
              writeAllFields: true,
              root: 'data',
              allowSingle: false,
          }
      }
  });
  
  
  var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
      clicksToEdit: 2,
      autoCancel: false,
      listeners: {
          edit: function (editor, context) {
              var emp = registrStore.getProxy();
              var con = context.record;
              emp.setExtraParam("id",                     con.data['id']);
              emp.setExtraParam("date_operation",         con.data['date_operation']);
              emp.setExtraParam("code",                   con.data['code']);
              emp.setExtraParam("status",                 con.data['status']);
              emp.setExtraParam("type",                   con.data['type']);               
          }
      }
  });
  
  var textField = {
      xtype: 'textfield'
  
  };
  
  // Определение столбцов
  var columns = [
      {
          header: 'ID',
          dataIndex: 'id',
          sortable: true,
          width: 35
      },
      {
  
          header: 'Дата',
          dataIndex: 'date_op',
          sortable: true,
          editor: textField
  
      },
      {
           header: 'Код',
           dataIndex: 'code',
           sortable: true,
           editor: textField
      },
      {
          header: 'Статус',
          dataIndex: 'status',
          sortable: true,
          editor: textField
      },
      {
          header: 'Тип',
          dataIndex: 'type',
          sortable: true,
          editor: textField
      }
  ];
    var pagingToolbar = {
      xtype: 'pagingtoolbar',
      store: registrStore,
      displayInfo: true,
      items: [
          '-',
          {
              text: 'Save Changes',
              handler: function () {
              registrStore.sync();
              }
          },
          '-',
          {
              text: 'Reject Changes',
              handler: function () {
                  // Отмена изменений в stoe
                  registrStore.rejectChanges();
              }
          },
          '-'
      ]
  };
  
  var onDelete = function () {
      var selected = grid.selModel.getSelection();
      Ext.MessageBox.confirm(
              'Confirm delete',
              'Are you sure?',
              function (btn) {
                  if (btn == 'yes') {
                      var nn = selected[0].get('id')
                      var emp = registrStore.getProxy();
                      emp.setExtraParam("id", nn)
                      grid.store.remove(selected);
                      grid.store.sync();
                  }
              }
      );
  };
  
  
  var onInsertRecord = function () {
      var selected = grid.selModel.getSelection();
      rowEditing.cancelEdit();
     var newEmployee = Ext.create("Operation");
     registrStore.insert(selected[0].index, newEmployee);
     rowEditing.startEdit(selected[0].index, 0);
  
  };
  
  var doRowCtxMenu = function (view, record, item, index, e) {
      e.stopEvent();
      if (!grid.rowCtxMenu) {
          grid.rowCtxMenu = new Ext.menu.Menu({
              items: [
                  {
                      text: 'Insert Operation',
                      handler: onInsertRecord
  
                  },
                  {
                      text: 'Delete Operation',
                      handler: onDelete
                  }
              ]
          });
      }
      grid.selModel.select(record);
      grid.rowCtxMenu.showAt(e.getXY());
  };
  
  
  var grid = Ext.create('Ext.grid.Panel', {
      title: 'Таблица операций',
      items: grid,
      columns: columns,
      store: registrStore,
      loadMask: true,
      bbar: pagingToolbar,
      plugins: [rowEditing],
      stripeRows: true,
      selType: 'rowmodel',
      viewConfig: {
          forceFit: true
      },
      listeners: {
          itemcontextmenu: doRowCtxMenu,
          destroy: function (thisGrid) {
              if (thisGrid.rowCtxMenu) {
                  thisGrid.rowCtxMenu.destroy();
              }
          }
      },
      renderTo: Ext.getBody()
  
  });
  registrStore.load();
  </code></pre>
  
  <p>});</p>