CODEWITHSUNDEEP
extjsextjs4
mikeb
mikeb

Reputation: 727

Hiding a panel in a tab panel extjs4.2

I have a tab panel that is displaying two tabs. I also created an Ext.panel.Panel (docspanel), that is displaying in both tabs.But how hide it for tab B?

tabPanel = Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,

        items: [
                {   
                    id:"panel_A",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",

                },{
                    id:"panel_B",
                    html: "<iframe src= '"+B_url+"' width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
                }],
     renderTo: Ext.getBody()
        });






    viewport = new Ext.Viewport({
        layout:'border',
        items:[tabPanel,docsPanel]
    });

Upvotes: 0

Views: 41

Answers (1)

Sergey Novikov
Sergey Novikov

Reputation: 4196

With this difinition your docsPanel added to Ext.Viewport(along with tab panel), not to tabPanel.

viewport = new Ext.Viewport({
    layout:'border',
    items:[tabPanel,docsPanel]
});

You can add tabPanel to panel A, like this:

items: [
    {
        items: [
            docsPanel,
            {
                xtype: 'panel',
                id:"panel_A",
                html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />"
            }
        ]
    },
    {
        id:"panel_B",
        html: "<iframe src= '"+B_url+"' width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />"
    }
],

or just hide() / show() docsPanel on tabchange event of tabPanel (imo its pointless).

Upvotes: 0

Related Questions