Results 1 to 1 of 1

Thread: How to show hidden control correctly?

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Default How to show hidden control correctly?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
            <title>&laquo;Test Dynamic Tabs&raquo;</title>
            <link rel="stylesheet" type="text/css" href="../../../../ExtJS/resources/css/ext-all.css"/>
            <script type="text/javascript" charset="windows-1251" src="../../../../ExtJS/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" charset="windows-1251" src="../../../../ExtJS/ext-all-debug.js"></script>
            <script type="text/javascript">
    Ext.onReady(function() {
        var
            viewport=new Ext.Viewport({
                layout: "border",
                renderTo: Ext.getBody(),
                items: [{
                    region: "north",
                    xtype: "toolbar",
                    //autoHeight: true,
                    height: 50,
                    items: [{
                        xtype: "tbspacer"
                        }, {
                        xtype: "button",
                        text: "Test1",
                        handler: function(btn){ DoIt(btn) }
                        }, {
                        xtype: "button",
                        text: "Test2",
                        handler: function(btn){ DoIt(btn) }
                        }, {
                        xtype: "button",
                        text: "Test3",
                        handler: function(btn){ DoIt(btn) }
                        }, {
                        xtype: "tbfill"
                    }]
                    }, {
                    region: "center",
                    xtype: "tabpanel",
                    id: "TabPanel",
                    hidden: true, // !!! <-- !!!
                    tabPosition: "bottom"
                }]
            });
    });
    
    function DoIt(btn)
    {
        var
            tabPanel,
            tab;
            
        if(!(tabPanel=Ext.getCmp("TabPanel")))
            return;
    
        if(!tabPanel.isVisible())
        {
            tabPanel.show();
            tabPanel.doLayout(); // !!! <-- !!!
            tabPanel.ownerCt.doLayout(); // !!! <-- !!!
        }
        
        if(!(tab=tabPanel.items.find(function(i){return i.title === btn.text;})))
            tab=tabPanel.add({title: btn.text, layout:'fit'});
        tabPanel.setActiveTab(tab);     
    }
            </script>
        </head>
        <body>
        </body>
    </html>
    Tabs aren't shown.

    [SOLVED]
    Code:
    function DoIt(btn)
    {
        var
            tabPanel,
            tab;
            
        if(!(tabPanel=Ext.getCmp("TabPanel")))
            return;
    
        if(!(tab=tabPanel.items.find(function(i){return i.title === btn.text;})))
            tab=tabPanel.add({title: btn.text, layout:'fit'});
        tabPanel.setActiveTab(tab); 
        
        if(!tabPanel.isVisible())
        {
            tabPanel.show();
            tabPanel.ownerCt.doLayout();
        }
    }
    Last edited by Ex_Soft; 19 Mar 2010 at 6:19 AM. Reason: [SOLVED]

Posting Permissions

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