title: Ext js - passing grid value to tab/grid panel below
body: <p>I'm back with another issue...  I have a page that has a grid panel (with cell editing) on top and a tabbed panel beneath it with a call to different grid panels inside each tab...</p>
  
  <p>My problem is I'm trying to get the grid panels WITHIN THE TABS to change as the user clicks from row to row in the top panel...  I know it's probably a listener/handler thing, but I'm having trouble finding an example that works...  </p>
  
  <p>First, here's the code for the top grid panel (where I think the listener/handler needs to go:</p>
  
  <pre><code>var pluginExpanded = true;
  var grid = Ext.create('Ext.grid.Panel', {
      height: 350,
      width: 700,
      title: 'Manufacturer URL Listing with info',
      store: store,
      tools: [{
          type: 'save',
          tooltip: 'Save Data',
          // hidden:true,
  
          handler: function (event, toolEl, panel) {
              // refresh logic
              //rowEditing.cancelEdit();
              var sm = grid.getSelectionModel();
  
              Ext.Msg.show({
                  title: 'Update Data',
                  msg: 'Are you sure you want to update the item information?',
                  buttons: Ext.Msg.YESNO,
                  icon: Ext.Msg.QUESTION,
                  fn: function (btn) {
                      if (btn === 'yes') {
                          store.update();
                          //store.sync();
                          store.load();
                          //Ext.getCmp(grid).getView().refresh();
                      }
                  }
              });
          }
      }],
      columns: [{
          dataIndex: 'id',
          flex: 1,
          text: 'ID',
          hidden: true
      }, {
          dataIndex: 'part_no',
          flex: 1,
          text: 'Part Number',
          editor: 'textfield'
      }, {
          dataIndex: 'tddb_retail',
          flex: 1.3,
          text: 'TD Retail',
          editor: 'textfield'
      }, {
          dataIndex: 'tddb_jobber',
          flex: 1.3,
          text: 'TD Retail',
          editor: 'textfield'
      }, {
          dataIndex: 'tddb_descr',
          flex: 1,
          text: 'Description',
          editor: 'textfield'
      }, {
          dataIndex: 'tddb_category',
          flex: 1,
          text: 'Category',
          editor: 'textfield'
      }, {
          dataIndex: 'tddb_subcategory',
          flex: 1,
          text: 'Sub Category',
          editor: 'textfield'
      }, ],
      forceFit: true,
      selType: 'cellmodel',
      plugins: [
      Ext.create('Ext.grid.plugin.CellEditing', {
          clicksToEdit: 1
      })],
  
      //paging bar
      bbar: Ext.create('Ext.PagingToolbar', {
          store: store,
          pagesize: 15,
          displayInfo: true,
          displayMsg: 'Displaying items {0} - {1} of {2}',
          emptyMsg: "No items to display",
      }),
  
      renderTo: Ext.getBody(),
  });
  </code></pre>
  
  <p>Full code (including tab/second grid here):</p>
  
  <pre><code>    Ext.Loader.setConfig({
          enabled: true
      });
  
      Ext.Loader.setPath('Ext.ux', '/include/extjs/examples/ux/');
      Ext.require([
          'Ext.grid.*',
          'Ext.data.*',
          'Ext.util.*',
          'Ext.toolbar.Paging',
          'Ext.ux.PreviewPlugin',
          'Ext.ModelManager',
          'Ext.tip.QuickTipManager',
          'Ext.state.*']);
  
      Ext.onReady(function () {
          Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
          Ext.tip.QuickTipManager.init();
          Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
          //added model inside onready
          Ext.define('Manufacturer', {
              extend: 'Ext.data.Model',
              fields: ['id', 'part_no', 'tddb_retail', 'tddb_jobber', 'tddb_descr', 'tddb_category', 'tddb_subcategory']
          });
  
          //separated store into unique var for guaranteeRange
          var store = Ext.create('Ext.data.Store', {
              model: 'Manufacturer',
              autoLoad: true,
              pageSize: 15,
              loadMask: true,
              proxy: {
                  type: 'direct',
                  //  extraParams:{ codes_id: 410 },
                  api: {
                      //  create: inventory.readManu,
                      read: inventory.readInventory,
                      update: inventory.updateInventory,
                      // destroy: worklist.getResults
                  },
                  reader: {
                      type: 'json',
                      root: 'data',
                      totalProperty: 'total',
                      successProperty: 'success'
                  },
                  writer: {
                      type: 'json',
                      writeAllFields: true,
                      encode: false,
                      root: 'data'
                  },
                  listeners: {
                      exception: function (proxy, response, operation) {
                          Ext.MessageBox.show({
                              title: 'REMOTE EXCEPTION',
                              msg: operation.getError(),
                              icon: Ext.MessageBox.ERROR,
                              buttons: Ext.Msg.OK
                          });
                      }
                  },
  
              }
          });
  
          store.getProxy().extraParams = {
              codes_id: document.getElementById('codes_id').value
          };
  
          //create the grid
  
          var pluginExpanded = true;
          var grid = Ext.create('Ext.grid.Panel', {
              height: 350,
              width: 700,
              title: 'Manufacturer URL Listing with info',
              store: store,
              tools: [{
                  type: 'save',
                  tooltip: 'Save Data',
                  // hidden:true,
  
                  handler: function (event, toolEl, panel) {
                      // refresh logic
                      //rowEditing.cancelEdit();
                      var sm = grid.getSelectionModel();
  
                      Ext.Msg.show({
                          title: 'Update Data',
                          msg: 'Are you sure you want to update the item information?',
                          buttons: Ext.Msg.YESNO,
                          icon: Ext.Msg.QUESTION,
                          fn: function (btn) {
                              if (btn === 'yes') {
                                  store.update();
                                  //store.sync();
                                  store.load();
                                  //Ext.getCmp(grid).getView().refresh();
                              }
                          }
                      });
                  }
              }],
              columns: [{
                  dataIndex: 'id',
                  flex: 1,
                  text: 'ID',
                  hidden: true
              }, {
                  dataIndex: 'part_no',
                  flex: 1,
                  text: 'Part Number',
                  editor: 'textfield'
              }, {
                  dataIndex: 'tddb_retail',
                  flex: 1.3,
                  text: 'TD Retail',
                  editor: 'textfield'
              }, {
                  dataIndex: 'tddb_jobber',
                  flex: 1.3,
                  text: 'TD Retail',
                  editor: 'textfield'
              }, {
                  dataIndex: 'tddb_descr',
                  flex: 1,
                  text: 'Description',
                  editor: 'textfield'
              }, {
                  dataIndex: 'tddb_category',
                  flex: 1,
                  text: 'Category',
                  editor: 'textfield'
              }, {
                  dataIndex: 'tddb_subcategory',
                  flex: 1,
                  text: 'Sub Category',
                  editor: 'textfield'
              }, ],
              forceFit: true,
              selType: 'cellmodel',
              plugins: [
              Ext.create('Ext.grid.plugin.CellEditing', {
                  clicksToEdit: 1
              })],
  
              //paging bar
              bbar: Ext.create('Ext.PagingToolbar', {
                  store: store,
                  pagesize: 15,
                  displayInfo: true,
                  displayMsg: 'Displaying items {0} - {1} of {2}',
                  emptyMsg: "No items to display",
              }),
  
              renderTo: Ext.getBody(),
  
          });
          //start
  
          var assetStore = Ext.create('Ext.data.Store', {
              storeId: 'assetStore',
              fields: ['item_id', 'link', 'filename'],
              proxy: {
                  type: 'direct',
                  //  extraParams:{ codes_id: 410 },
                  api: {
                      read: inventory.getAssets
                  },
                  reader: {
                      type: 'json',
                      root: 'data',
                      totalProperty: 'total',
                      successProperty: 'success'
                  },
              }
          });
          assetStore.getProxy().extraParams = {
              item_id: 1
          };
          assetStore.load();
  
          Ext.define('assetgrid', {
              extend: 'Ext.grid.Panel',
              alias: 'widget.assetgrid',
              width: 425,
              height: 250,
              collapsible: true,
              store: 'assetStore',
              columns: [{
                  header: 'Item ID',
                  dataIndex: 'item_id'
              }, {
                  header: 'Link',
                  dataIndex: 'link',
                  flex: 1
              }, {
                  header: 'Filename',
                  dataIndex: 'filename'
              }],
              height: 200,
              width: 400
          });
  
          Ext.create('Ext.tab.Panel', {
              width: 700,
              height: 200,
              activeTab: 0,
              items: [{
                  title: 'Item Assets',
                  xtype: 'assetgrid'
              }, {
                  title: 'Item Description',
                  bodyPadding: 10,
                  html: 'link to item assets tab'
              }, {
                  title: 'Item Epi',
                  bodyPadding: 10,
                  html: 'link to epi'
              }, {
                  title: 'Item Package',
                  bodyPadding: 10,
                  html: 'link to package'
              }, {
                  title: 'Item Price',
                  bodyPadding: 10,
                  html: 'link to price'
              }, {
                  title: 'YMM Info',
                  bodyPadding: 10,
                  html: 'link to ymm'
              } //,
              //listview,listview,listview
              ],
              renderTo: Ext.getBody()
          });
  
      });
  </code></pre>
  
  <p>Any help is greatly appreciated! I LOVE StackOverflow!!!</p>