GridPanel + other HTML in a TabPanel

[CGremlin]

Hi all,

I'm pretty much brand new to the ExtJS world, and I've been having some difficulty incorporating the combination of a GridPanel along with some other static HTML into a single TabPanel tab. I apologize in advance if this has been addressed elsewhere, but I haven't come across any sample code that deals with this particular combination. I can put a grid by itself into a tab, but not with the other HTML.

The grid itself is pretty simple, and almost straight from the example code:

var ruleGrid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'record_rules',header: "Rule Name", width: 160, sortable: true, dataIndex: 'rule_name'},
            {header: "Record Days", width: 75, sortable: true, dataIndex: 'record_days'},
            {header: "Start Time", width: 75, sortable: true, dataIndex: 'start_time'},
            {header: "End Time", width: 75, sortable: true, dataIndex: 'end_time'},
            {header: "Channel", width: 75, sortable: true, dataIndex: 'channel'},
            {header: "SCTE-35", width: 85, sortable: true, dataIndex: 'scte_flag'},
            {header: "Enabled", width: 75, sortable: true, dataIndex: 'enabled'}
        ],
        stripeRows: true,
        autoExpandColumn: 'record_rules',
        height:350,
        width:600,
    });

The TabPanel that I want to put everything in is also quite simple:

    var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:800,
        activeTab: 0,
        deferredRender: false,
        autoTabs: true,
        frame:true,
        defaults:{autoHeight: true},
        items:[{
                contentEl:'paneRules', title:'Rules', autoLoad: 'paneRules.html'
            },{
                contentEl:'paneEPG', title:'EPG', autoLoad: 'paneEPG.html'
            },{
                contentEl:'paneICE', title:'ICE', autoLoad: 'paneICE.html'
            },{
                contentEl:'paneADI', title:'ADI Export', autoLoad: 'paneADI.html'
            },{
                contentEl:'paneLineup', title:'Program Lineup', autoLoad: 'paneLineup.html'
            }
        ]
    });

The grid works fine if I do a tabs.add() call after declaring the TabPanel, so I don't really think there's a problem with the grid per se. I've tried. The object is to have the grid appear in the first panel, with the HTML contained in "paneRules.html" appearing underneath it. I've attempted putting a target DIV for the grid in paneRules.html itself, with no success. I've also attempted defining the grid's target DIV as a child of the "paneRules" DIV that this particular tab gets rendered into, again with no luck. I've also tried composing a separate Panel object, with the grid and HTML file as items, and then putting *that* into the target tab.

What's the accepted "best practice" for doing something like this?

[walldorff]

Try an anchor layout for the tab and a fit layout for the container of the TabPanel.

var h1 = {contentEl:'paneRules', title:'Rules', autoLoad: 'paneRules.html'};
var h2 = {contentEl:'paneEPG', ...}

var tp = new Ext.TabPanel({
    activeTab: 0
    ,items:[{
        title: 'tab 1'        
        ,layout: 'anchor'
        ,border: false
        ,items: [{
            anchor: '0, 70%' // set height of grid to 70% (or whatever) of the parent
            // grid here
        },{
            // Panel for html
            anchor : '0, 30%'
            ,items:[h1, h2, ...]
        }]
    },{
        title:'tab2'
        // more content
    }]
});

var ct = new Ext.Panel({ // container
    renderTo: 'tabs1'
    ,height : 400 // or so
    ,width : 800
    ,layout: 'fit'
    ,items: tp
}).show(); 

Maybe you want a title in the container panel.
There are many good resources, but you have to take your time to explore the docs, the FAQs and the examples.
Have a look at:
Extensions and Plugins and Examples from Saki as well as Ext JS in Action from jgarcia


Have fun!