2013-04-25 2 views
0

다른 문제가 있습니다 ... 셀 편집이있는 격자 패널과 그 아래 탭 패널이 호출 된 페이지가 있습니다. 각 탭 안의 서로 다른 그리드 패널에 ...Ext js - 아래의 탭/격자 패널에 격자 값 전달

내 문제는 사용자가 위쪽 패널의 행에서 행을 클릭 할 때마다 바뀌는 그리드 패널을 얻으려고하는 것입니다. 리스너/처리기 일이,하지만 작동 예를 ... 찾는 데 문제

첫째, 여기에 내가 리스너/처리기 갈 필요하다고 생각 상단 그리드 패널에 대한 코드는 (의 :

(여기 탭/초 격자 포함)

전체 코드 :

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() 
     }); 

    }); 

은 어떤 도움이 크게 감사합니다! 나는 사랑한다 StackOverflow !!!

답변

0

귀하의 질문은 명확하지 않습니다하지만 난 당신이 같은 것을 원하는 것 같아요 :

//var tabPanel = Ext.create('Ext.tab.Panel', { 
grid.on({ 
    selectionchange: function (s, sel, e) { 
     tabPanel.setActiveTab(sel[0].data.index); 
    } 
})