StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGrid inside Tab
text
Body
copied!<p>I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .</p> <p>This is the code:</p> <pre><code>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 }] }); </code></pre> <p>When I load the page there's no error, but the grid is not shown.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload