JavaScript
Run Code
Open in Fiddle
Ext.application({ name: 'Fiddle', launch: function () { Ext.create('Ext.data.Store', { storeId: 'simpsonsStore', fields: ['name', 'phone'], data: [{ name: 'Lisa', phone: '555-111-1224' }, { name: 'Bart', phone: '555-222-1234' }, { name: 'Homer', phone: '555-222-1244' }, { name: 'Marge', phone: '555-222-1254' }] }); Ext.create('Ext.Panel', { renderTo: Ext.getBody(), height: 300, width: 600, bodyPadding: 15, layout: 'hbox', bbar: [{ xtype: 'button', text: 'show headers', handler: () => { const grid = Ext.first('#second'); grid.setHideHeaders(false); } }, { xtype: 'button', text: 'show headers fix', handler: () => { const grid = Ext.first('#second'); grid.body.removeCls('x-noborder-trbl').addCls('x-noborder-rbl'); } }, '-', { xtype: 'button', text: 'hide headers', handler: () => { const grid = Ext.first('#second'); grid.setHideHeaders(true); } }, { xtype: 'button', text: 'hide headers fix', handler: () => { const grid = Ext.first('#second'); grid.body.removeCls('x-noborder-rbl').addCls('x-noborder-trbl'); } }], items: [{ xtype: 'grid', flex: 1, hideHeaders: true, margin: '0 10 0 0', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }] }, { xtype: 'grid', itemId: 'second', flex: 1, store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], listeners: { afterrender: (g) => { g.setHideHeaders(true); } } }] }) } });