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 ?

Answer 1

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