1. #1
    Ext User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
    CGremlin is on a distinguished road

      0  

    Default GridPanel + other HTML in a TabPanel

    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:

    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:

    Code:
        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?

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    164
    Vote Rating
    2
    walldorff is on a distinguished road

      0  

    Default


    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'};
    var 
    h2 = {contentEl:'paneEPG', ...}

    var 
    tp = new Ext.TabPanel({
        
    activeTab0
        
    ,items:[{
            
    title'tab 1'        
            
    ,layout'anchor'
            
    ,borderfalse
            
    ,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, ...]
            }]
        },{
            
    title:'tab2'
            
    // more content
        
    }]
    });

    var 
    ct = new Ext.Panel({ // container
        
    renderTo'tabs1'
        
    ,height 400 // or so
        
    ,width 800
        
    ,layout'fit'
        
    ,itemstp
    }).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!
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi