EXT JS 4.1 how to display a grid in tabPanel

Question

I am trying to display a grid (object Ext.grid.GridPanel of EXTJS 4.1) in a tabPanel (object Ext.tab.Panel) but I have problems : the grid works perfectly as an independant source code, and the panel works also as an independant source code. But when I try to make the grid and the panel working together, it doesn't work.

Grid :

 var monGridPanelDetailEcriture = new Ext.grid.GridPanel({
    id: 'monGridPanelDetailEcriture',
    frame: true,
    width: 1100,
    autoHeight: true,
    renderTo: 'gridDetailEcriture',
    store: monStoreDetailEcriture,
    columns: mesColonnesDetailEcriture
});

TabPanel :

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [{
        title: 'Short Text',
        closable: true
    },{
        title: 'Long Text'
    }]
});

I search on internet for a solution but each time what I found didn't work : I tried this solution which was explained on several forums :

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [{
        monGridPanelDetailEcriture 
    },{
        title: 'Long Text'
    }]
});

But I have a Javascript error indicating this is not a way to describe items.

I also tried to create a new type of widget on the Grid (with the property "alias") but it didn't work.

Do someone have a solution ?

dougajmcdonald · Accepted Answer · 2012-10-23T16:10:52.127

Your second attempt is almost there but monGridPanelDetailEcriture is already an object do you don't need to wrap it in {}.

Therefore the following should work:

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [
        monGridPanelDetailEcriture
    ]
});

EDIT: You probably also don't want the renderTo on your grid, as that will be rendering within you tab panel. EDIT-EDIT: Also, I think it's perhaps better practice to use Ext.getBody() in your renderTo, rather then document.body. Seems a bit more Ext'y

Thanks a lot it works perfectly !! And thank you for your advice I'm going to apply it. — lilpeach, Oct 23 '12 at 16:45

score 0 · Answer 2 · answered Jul 26 '13 at 06:33

For Multiple Tabs:

 var tabs = Ext.create('Ext.tab.Panel', {

     renderTo: document.body,
     width: 450,
     activeTab: 0,     // first tab initially active
     defaults :{
          bodyPadding: 10
      },
    items: [
          monGridPanelDetailEcriture,
          {
           title:'tab2',
           html:'I m tab 2'
           }
       ]
   });

EXT JS 4.1 how to display a grid in tabPanel

2 Answers2