タブ内のグリッド

Question

グリッド（Ext.grid.GridPanel）オブジェクトをタブ内に配置しようとしています。私はエラーがありませんページをロードすると

var grid = new Ext.grid.GridPanel({ 
    store: new Ext.data.Store({ 
     autoDestroy: true, 
     reader: reader, 
     data: xg.dummyData 
    }), 
    colModel: new Ext.grid.ColumnModel({ 
     defaults: { 
      width: 120, 
      sortable: true 
     }, 
     columns: [ 
      {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'}, 
      {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, 
      {header: 'Change', dataIndex: 'change'}, 
      {header: '% Change', dataIndex: 'pctChange'}, 
      // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype 
      { 
       header: 'Last Updated', width: 135, dataIndex: 'lastChange', 
       xtype: 'datecolumn', format: 'M d, Y' 
      } 
     ] 
    }), 
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}), 
    width: 600, 
    height: 300, 
    frame: true, 
    title: 'Framed with Row Selection and Horizontal Scrolling', 
    iconCls: 'icon-grid' 
}); 

this.tabs = new Ext.TabPanel({ 
    fullscreen: true, 
    type: 'dark', 
    sortable: true, 
    dockedItems: [ 
    { 
     xtype:'toolbar', 
     title:'Hello World' 
    }], 
    tabBar: { 
     ui: 'light', 
     layout: { 
      pack: 'left' 
     } 
    }, 
    items: [ 
    { 
     cls:'hello', 
     id:'tab1', 
     html : '<a>hello</a>', 
     title:'Monitor' 
    }, { 
     cls:'world', 
     id:'tab2',  
     xtype: 'map',     
     html : '<a>hello world</a>', 
     title:'Map' 
    }, { 
     cls:'world', 
     id:'tab3',         
     html : '<a>hello world</a>', 
     dockedItems:grid 
    }] 
});  

が、グリッドが表示されません。

この

はコードです。

Answer 1

グリッドはドッキングされたアイテムではありません（これは、ツールバーやその他のものがコンテナの片面に貼り付いている場合）。あなたはグリッド全体のタブを取りたい場合は、単に直接タブパネルに項目として追加し、それは完全なタブになります：

items: [ 
{ 
    cls:'hello', 
    id:'tab1', 
    html : '<a>hello</a>', 
    title:'Monitor' 
}, { 
    cls:'world', 
    id:'tab2',  
    xtype: 'map',     
    html : '<a>hello world</a>', 
    title:'Map' 
}, 
grid ]