Hello,

I know that there are a lot of posts on this subject. But non of them offers a solution to my problem.

I want to make an interface with a top panel, a left panel and a right panel. The right panel is a tab panel. In this panel I want to show a grid. this grid needs to fill an entire tab panel. And I need the scrollbars. So it has to be resizable.

My code this is the main layout:
Code:
Ext.onReady(function(){    
    
    var companies = new CompaniesPanel();
    var packages = new PackagesPanel();    
    
       var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new Ext.BoxComponent({ // raw
                region:'north',
                el: 'north',
                height:50
            }),{
                region:'west',
                contentEl: 'west',
                id:'west-panel',
                title:'Functions',
                split:true,
                width: 200,
                minSize: 150,
                maxSize: 200,
                collapsible: true,
                margins:'0 0 0 5'            
            },     new Ext.Container({
                    region: 'center',
                    layout:'card',
                    id: 'center-container',
                    el: 'center',
                    activeItem: 0,
                    items: [companies, packages]
                })
         ]
    });
    
    Ext.get("company_btn").on('click', function() {
       Ext.getCmp("center-container").getLayout().setActiveItem('companies-center-panel');
    });

    Ext.get("package_btn").on('click', function() {
           Ext.getCmp("center-container").getLayout().setActiveItem('packages-center-panel');
    });
});
My code for the tabpanel and the grid:
Code:
CompaniesPanel = function() {
    //Company List - Store and Grid
    var company_list_store = new Ext.data.Store({
        disableCaching: false,
        url: basedir+'tincMailManager/getAllCompaniesXML',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'company'
           }, [
                   {name: 'username'},
                   {name: 'password'},
                   {name: 'name'},
                {name: 'streetnumber'},
                {name: 'zip'},
                {name: 'city'},
                {name: 'country'},
                {name: 'phone'},
                {name: 'fax'},
                {name: 'contactemail'},
                {name: 'billingemail'},
                {name: 'vat'},
                {name: 'ebilling'},
                {name: 'packageid'},
                {name: 'databasename'},
                {name: 'databaseusername'},
                {name: 'databasepassword'},
                {name: 'userlevel'},
                {name: 'active'},
                {name: 'customoptions'},
                {name: 'id'}
           ]),
        autoLoad: true
    });
    // create the grid
    var company_list_grid = new Ext.grid.GridPanel({
        id: 'company-grid',
        store: company_list_store,
        cm: new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
            {id:'id',header: "ID", sortable: true, dataIndex: 'id'},
            {header: "Name", dataIndex: 'name', sortable: true},
            {header: "Streetnumber", dataIndex: 'streetnumber', sortable: true},
            {header: "Zip", dataIndex: 'zip', sortable: true},
            {header: "City", dataIndex: 'city', sortable: true},
            {header: "Country", dataIndex: 'country', sortable: true},
            {header: "Phone", dataIndex: 'phone', sortable: true},
            {header: "Fax", dataIndex: 'fax', sortable: true},
            {header: "Contact e-mail", dataIndex: 'contactemail', sortable: true},
            {header: "Billing e-mail", dataIndex: 'billingemail', sortable: true},
            {header: "Vat", dataIndex: 'vat', sortable: true},
            {header: "E-billing", dataIndex: 'ebilling', sortable: true},
            {header: "Package Id", dataIndex: 'packageid', sortable: true},
            {header: "DB Name", dataIndex: 'databasename', sortable: true},
            {header: "DB Username", dataIndex: 'databaseusername', sortable: true},
            {header: "DB Password", dataIndex: 'databasepassword', sortable: true},
            {header: "Userlevel", dataIndex: 'userlevel', sortable: true},
            {header: "Active", dataIndex: 'active', sortable: true},
            {header: "Custom Options", dataIndex: 'customoptions', sortable: true}
        ]),
        loadMask:{msg: 'Loading'},
        autoHeight: true,
        title: 'Company List',
        iconCls: 'icon_list_company',
    });
    

    CompaniesPanel.superclass.constructor.call(this, {
        id:'companies-center-panel',
        title:'Companies Administration',
        region:'center',
        split:true,
        items:[
            new Ext.TabPanel({
                    activeTab: 0,
                    autoHeight: true, 
                    border: false,
                    items:[
                        company_list_grid,
                        {
                            title:'Add Companies',
                            iconCls: 'icon_add_company'
                        },
                        {
                            title:'Edit Companies',
                            iconCls: 'icon_edit_company'
                        },
                        {
                            title:'Delete Companies',
                            iconCls: 'icon_delete_company'
                        }
                    ]
                })
        ]
    });
};

Ext.extend(CompaniesPanel, Ext.Panel, {
    // prevent the default context menu when you miss the node
    afterRender : function(){
        CompaniesPanel.superclass.afterRender.call(this);
    }
});
Thanx