View Full Version : Extjs: Reuse the same grid in TabPanel

20 Dec 2010, 12:32 AM
Hi, in a Extjs application I have a Grid and a Tabs line over it. Content of the Grid depends on the selected Tab. Say tabs has Jan-Feb-Mar-... values. Clicking of the Tab I would reload grid's store

Question: is it possible to avoid duplicating of the 12 grid components in favor to have one shared instance?

Thanks, Oleg

Disclaimer: searching at the sencha's forum, google, stackoverflow was not successful :(

20 Dec 2010, 1:04 AM
Do you really need a TabPanel?

Wouldn't a GridPanel with a top toolbar with buttons in a toggleGroup work better (you could adjust the styling so the buttons would look like tabs)?

20 Dec 2010, 1:13 AM
Condor, thanks for quick answer. That's good idea, I've thought about too, but I have pretty few experience, how to style buttons. I remember there is a toggling button attribute, but what about tab-like skin?

20 Dec 2010, 1:23 AM
another issue with buttons, what if I have to have too many tabs that can not be arranged in one toolbar line. Would buttons arranges with scrolling or they will be not visible on the overflow?

20 Dec 2010, 1:33 AM
Toolbars don't support scrolling, but they do support overflow in a menu (which I personally like better).

20 Dec 2010, 1:29 PM
Could someone direct me to the theme how to style a buttons to be pretended as a tab line?

20 Dec 2010, 11:22 PM

<style type="text/css">
.x-panel-tbar .tbar-tabpanel {
margin-bottom: 0;
padding-bottom: 0;
.tbar-tabpanel .x-btn-over .x-btn-bl {
background-position: -6px -24px;
.tbar-tabpanel .x-btn-over .x-btn-bc {
background-position: 0 -2168px;
.tbar-tabpanel .x-btn-over .x-btn-br {
background-position: -9px -24px;
.tbar-tabpanel .x-btn-click .x-btn-bl,
.tbar-tabpanel .x-btn-menu-active .x-btn-bl,
.tbar-tabpanel .x-btn-pressed .x-btn-bl {
background-position: -12px -24px;
.tbar-tabpanel .x-btn-click .x-btn-bc,
.tbar-tabpanel .x-btn-menu-active .x-btn-bc,
.tbar-tabpanel .x-btn-pressed .x-btn-bc {
background-position: 0 -3240px;
.tbar-tabpanel .x-btn-click .x-btn-br,
.tbar-tabpanel .x-btn-menu-active .x-btn-br,
.tbar-tabpanel .x-btn-pressed .x-btn-br {
background-position: -15px -24px;
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/build/ext-3.3+/resources/images/default/s.gif';
Ext.onReady(function () {

new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'grid',
tbar: {
cls: 'tbar-tabpanel',
items: [{
text: 'Tab 1',
toggleGroup: 'group',
pressed: true
text: 'Tab 2',
toggleGroup: 'group'
store: [
[1, 'One'],
[2, 'Two'],
[3, 'Three']
columns: [
{header: 'Number', dataIndex: 'field1'},
{header: 'Text', dataIndex: 'field2'}

21 Dec 2010, 1:35 AM
Thank you Condor, issue is fixed!

Using your tip option enableOverflow : true I have found too.