Results 1 to 2 of 2

Thread: GridPanel + other HTML in a TabPanel

  1. #1
    Ext User
    Join Date
    Feb 2009
    Vote Rating

    Default GridPanel + other HTML in a TabPanel

    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',
    The TabPanel that I want to put everything in is also quite simple:

        var tabs = new Ext.TabPanel({
            renderTo: 'tabs1',
            activeTab: 0,
            deferredRender: false,
            autoTabs: true,
            defaults:{autoHeight: true},
                    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?

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Antwerp, Belgium
    Vote Rating


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

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

    tp = new Ext.TabPanel({
    title'tab 1'        
    ,items: [{
    anchor'0, 70%' // set height of grid to 70% (or whatever) of the parent
                // grid here
    // Panel for html
    anchor '0, 30%'
    ,items:[h1h2, ...]
    // more content

    ct = new Ext.Panel({ // container
    ,height 400 // or so
    ,width 800
    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!
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts