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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar