1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    13
    Vote Rating
    0
    santosh_bdp is on a distinguished road

      0  

    Default How to make the tab panel collapsible in border layout

    How to make the tab panel collapsible in border layout


    HI

    I have a requirement where i need a Tab panel in the south region which is collapsible...i tried to add one but for some reason the collapsible is not working for tab panel...its adding a panel header only for collapsing on top of the tab panel in firefox and in safari and ie its not even visible....or else sometimes its making the tab panel closable not collapsible...

    i am looking for just a tab panel in the south region in the border layout which will be collapsible just like the panel component...i am really stuck on this one...Please help

    Thanks

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      0  

    Default


    You have to nest your TabPanel in another collapsible Panel with layout:'fit'.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    13
    Vote Rating
    0
    santosh_bdp is on a distinguished road

      0  

    Default


    thats not helping, when i tried to do that, its giving me an extra panel title header , i want the whole tab panel to be collapsed without having an extra panel title header, i tried to put it in the box component but thats not working as well..,plz help

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      0  

    Default


    Don't set the title of the TabPanel, but rather Panel it is contained in.
    PHP Code:
    <html>
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <
    title>test</title>
        <
    link type="text/css" rel="stylesheet" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css"/>
        <
    script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></script>
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';

            Ext.onReady(function() {
                var vp = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                        region: 'center',
                        title: 'Center Region',
                        margins: '5 5 0 5'
                    }, {
                        region: 'south',
                        split: true,
                        height: 300,
                        title: 'South Region',
                        collapsible: true,
                        margins: '0 5 5 5',
                        layout: 'fit',
                        items: {
                            xtype: 'tabpanel',
                            border: false,
                            activeTab: 0,
                            items: [
                                {title: 'Tab 1'},
                                {title: 'Tab 2'},
                                {title: 'Tab 3'},
                                {title: 'Tab 4'},
                                {title: 'Tab 5'}
                            ]
                        }
                    }]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html> 

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    13
    Vote Rating
    0
    santosh_bdp is on a distinguished road

      0  

    Default


    I really appreciate your reply, i saw your code and that was what i did as well but thats not what i wanted.. let me be more specific, in the code you have provided..in the south region, there is this extra Panel with the title South region..i completely want to eliminate that, instead i want the little collapsible icon to display beside the tabs at the complete right end of it, which means all the tabs will be on the left side and the icon which is for collapsing will be on the right end..i was trying various ways but could nt find the right fit for it...

    thanks

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      0  

    Default


    I see. It is not possible right out of the box. Try searching the forums for a plug-in, that does it. I never seen one myself, though.

  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Austria
    Posts
    87
    Vote Rating
    0
    Nesta is on a distinguished road

      0  

    Default


    dawesi has written a inline Toolbar plugin for the TabPanel.
    http://www.extjs.com/forum/showthrea...Inline-Toolbar

    maybe that helps you

Thread Participants: 2

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