TabPanel including a Container with GridPanel and FormPanel - "this.body is null"

[dahrens]

hi everybody,

got a TabPanel with two Tabs - both including a Container with different Panel-Setups.
The Problem is the 2nd Tab, which container includes one GridPanel and one FormPanel.
The FormPanel will be rendered into/over the GridPanel instead next to it and there are just the buttons from the Form visibile.

I suggest that there is something wrong with the layout-management of the Containers/Panels but i have no idea where exactly. my debug console says, that "this.el is null" - if i interpret it right, it crashs in the initEl-function of FormPanel.

if i remove the FormPanel from its Container everything seems to be ok.

PNEAVGUI.AttributeGrid = Ext.extend(Ext.grid.GridPanel, {
    // override 
    initComponent : function() {
        Ext.apply(this, {
            columns: [
                {header: "Attribute Name", dataIndex: 'name', sortable: true},
                {header: "Attribute Type", width: 30, dataIndex: 'attr_render_type', sortable: true},
                //{header: "Used by Groups", dataIndex: 'Title', sortable: true},
            ],
            sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
            store: new Ext.data.JsonStore({
                storeId: 'attributeGridStore',
                baseParams: {entitytypeid:'1'},
                url: 'ajax.php?ajaxID=tx_pneav::getAttributes',
                root: 'rows',
                fields: ['uid', 'name', 'attr_render_type'],
            }),
            /*listeners: {
                rowselect: function(sm, row, rec) {
                    Ext.getCmp("company-form").getForm().loadRecord(rec);
                }
            },*/
            // force the grid to fit the space which is available
            viewConfig: {
                forceFit: true
            }
        });
        // finally call the superclasses implementation
        PNEAVGUI.AttributeGrid.superclass.initComponent.call(this);        
    }
});
Ext.reg('attributegrid', PNEAVGUI.AttributeGrid);

PNEAVGUI.AttributeForm = Ext.extend(Ext.FormPanel, {
    // override 
    initComponent : function() {
        Ext.apply(this, {
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            autoEl: {},
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                })
            ],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]

        });
        PNEAVGUI.AttributeForm.superclass.initComponent.call(this);
    },
    
    updateDetail: function(data) {
        //this.tpl.overwrite(this.body, data);
        Ext.Msg.alert('detailPanel','update Details! data: '+data);
        // TODO: Data to Form glue
    }    
});
Ext.reg('attributeform', PNEAVGUI.AttributeForm);

PNEAVGUI.ManageAttributePanel = Ext.extend(Ext.Container, {
    // override initComponent
    initComponent: function() {
            Ext.applyIf(this, {
                    autoEl: {},
                    layout: 'border',
                    items: [{
                        xtype: 'attributegrid',
                        width: 400,
                        height: 450,
                        region: 'center',
                        id: 'gridPanel',
                    }, {
                        xtype: 'attributeform',
                        width: 250,
                        height: 450,
                        region: 'east',
                        id: 'detailPanel',
                    }]
            })
            // call the superclass's initComponent implementation
            PNEAVGUI.ManageAttributePanel.superclass.initComponent.call(this);
    },
});
//register an xtype with this class
Ext.reg('manageattributepanel', PNEAVGUI.ManageAttributePanel);

PNEAVGUI.MyTabPanel = Ext.extend(Ext.TabPanel, {
    // override initComponent
    initComponent: function() {
        // used applyIf rather than apply so user could
        // override the defaults
        Ext.applyIf(this, {
            width:650,
            height:450,
            frame:true,
            layoutOnTabChange: true,
            //defaults:{autoHeight: true},
            items:[
                {title: 'Manage Attribute Sets', xtype: 'treecontainer', id: 'managesets'},
                {title: 'Manage Attributes', xtype: 'manageattributepanel', id: 'manageattributes'}
            ],
        });
        // call the superclass's initComponent implementation        
        PNEAVGUI.MyTabPanel.superclass.initComponent.call(this);
    },
    
});
Ext.reg('mytabpanel', PNEAVGUI.MyTabPanel);

any suggestions or solutions for this problem?

thanks,
dennis

[shibubh]

ok its been long time i got a same problem. at that time i just render the form in document's body and it works.
try this

 Ext.applyIf(this, {
                    autoEl: {},
                    layout: 'border',
                    items: [{
                        xtype: 'attributegrid',
                        width: 400,
                        height: 450,
                        region: 'center',
                        id: 'gridPanel',
                    }, {
                        xtype: 'attributeform',
                        width: 250,
                        height: 450,
                        renderTo:document.body,
                        region: 'east',
                        id: 'detailPanel',
                    }]
            })

[dahrens]

the form completely disappers with renderTo: document.body

Ext.onReady(function() {
    // create an instance of the app
    var pneavGUI = new PNEAVGUI.MyTabPanel({
        renderTo: 'tabs'
    });
    pneavGUI.activate('managesets');
    Ext.StoreMgr.get('attributeGridStore').load();
    Ext.StoreMgr.get('attributeSetComboStore').load();
});

the div with id "tabs" is inside of a TYPO3 Module. i'd like to render the whole extjs-gui into this div.