1. #1
    Sencha User Monkee's Avatar
    Join Date
    Oct 2009
    Location
    Woking, UK
    Posts
    17
    Vote Rating
    1
    Monkee is on a distinguished road

      0  

    Default Vertical Tabs in ExtJS4 - Ext.ux.tab.VerticalPanel

    Vertical Tabs in ExtJS4 - Ext.ux.tab.VerticalPanel


    Simple Ext4 widget to render vertical tabs.

    Demo: http://lucian.lature.net/extjs/demo/VerticalTabPanel/

    The code is not stable yet (after all, it's "release early, release often"), I have to solve a nasty bug related to tabs having "autoHeight" property set to true first. You can see what is all about if you visit the demo and check the first example.
    For now, it seems that the widget is miscalculating its height, taking into consideration only the height of the tab.Bar and not the one of tab.Panel.

    If you have any ideas on how to solve that bug and help a fellow coder, please reply to this thread
    Still, any contributions of testing, improvements or other constructive feedback are greatly appreciated.

    UPDATES:
    21/06/2011 - VerticalBar extends Toolbar in order to solve some IE issues. Tested in IE6, IE7 and IE9 (I forgot about IE8, but it should be fine), Chrome 12 on Mac and Safari. Still unstable on Opera (I believe it's a rendering bug in the way docked items are being added into a layout, but I will have to dig more on this).

    Enjoy!
    Last edited by Monkee; 21 Jun 2011 at 3:03 AM. Reason: plugin updated

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Location
    The Netherlands
    Posts
    194
    Vote Rating
    0
    nicobarten is an unknown quantity at this point

      0  

    Default


    This is almost what i need not exactly, but i hope you don't mind if i try to change it a bit in my code? I'm trying to create a version with bigger tabs (more height each tab) and with the left border 'docked' to the left border of the panel it's inside in.

    It look very nice

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Location
    france
    Posts
    56
    Vote Rating
    0
    pkli is on a distinguished road

      0  

    Thumbs up Text overflow

    Text overflow


    Nice work.

    A quick view in Chrome 12 Mac let me see that tab title overflow ("Normal tab" and "Disabled tab" in third example) add a scroller under text.

    I think you have just to force overflow:hidden ....

  4. #4
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default IE8

    IE8


    Showing up really weird on IE8. Can't read tab and it's floating away from the grid.

  5. #5
    Sencha User Monkee's Avatar
    Join Date
    Oct 2009
    Location
    Woking, UK
    Posts
    17
    Vote Rating
    1
    Monkee is on a distinguished road

      0  

    Default


    @pkli: "overflow: hidden" was already there, maybe you should increase a little bit the width of the tabs to avoid the horizontal scrollbars.

    @ValterBorges: there were some problems not only in IE8, but in IE9 also, and I think I've solved those problems, please check the latest version of the demo.

  6. #6
    Sencha User littletree's Avatar
    Join Date
    Jun 2011
    Location
    USA
    Posts
    17
    Vote Rating
    0
    littletree is on a distinguished road

      0  

    Default


    In what ways is your version an improvement over the one at http://iamtotti.com/blog/2010/03/ext...panel-example/?

    Additionally, your demo page doesn't provide a link to download, but maybe this was intentional.

    Either way, great work!

  7. #7
    Sencha User littletree's Avatar
    Join Date
    Jun 2011
    Location
    USA
    Posts
    17
    Vote Rating
    0
    littletree is on a distinguished road

      0  

    Default


    Ok, so I beat my head against a wall for a while today while getting the following error:
    Code:
    layout.owner is undefined
    in ext-all-debug.js line 23050.

    After a bit of digging I found that by commenting out the following line:

    Code:
    me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);
    in VerticalPanel.js (around line 93), I no longer get the error, and the page loads fine.

    Any ideas why? I am loading it into the page as a property of my main viewport class like so:
    Code:
    Ext.define('LT.view.Viewport', {
        extend: 'Ext.container.Viewport',
        layout: 'border',
        title: 'Test Tabs',
        items: [{
            activeTab: 0,
            plain: true,
            xtype: 'tabpanel',
            region: 'center',
            layout: 'card',
            items: [{
                title: 'Normal Tab',
                xtype: 'verticaltabpanel',
                border: false,
                activeTab: 0,
                tabsConfig: {
                    width: 150,
                    marginTop: 5,
                    textAlign: 'right'
                },
                items: [{
                    title: 'Normal Tab',
                    html: "My content was added during construction."
                }, {
                    title: 'Test Tab 1',
                    //autoLoad:'ajax1.htm'
                    html: "Yeah there is stuff here in Vertical Tab 1."
                }, {
                    title: 'Test Tab 2',
                    html: "Yeah there is stuff here in Vertical Tab 2."
                    //autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
                }, {
                    title: 'Event Tab',
                    //listeners: {activate: handleActivate},
                    html: "I am tab 4's content. I also have an event listener attached. not gonna fire"
                }, {
                    title: 'Disabled Tab',
                    disabled: true,
                    html: "Can't see me cause I'm disabled"
                }]
            }, {
                title: 'Ajax Tab 1',
                html: 'yeah no ajax 1'
                // autoLoad:'ajax1.htm'
            }, {
                title: 'Ajax Tab 2',
                html: 'uh, sorry no tab 2 to see here'
                //  autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            }, {
                title: 'Disabled Tab',
                disabled: true,
                html: "Can't see me cause I'm disabled"
            }]
        }]
    });

  8. #8
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    0
    petar_chan is on a distinguished road

      0  

    Default


    there is no download link. Where is this extention VerticalPanel.js

  9. #9
    Sencha User littletree's Avatar
    Join Date
    Jun 2011
    Location
    USA
    Posts
    17
    Vote Rating
    0
    littletree is on a distinguished road

      0  

    Default


    Quote Originally Posted by petar_chan View Post
    there is no download link. Where is this extention VerticalPanel.js
    http://lucian.lature.net/extjs/ux/tab/VerticalPanel.js

    I'm not sure if he intentionally left out this link or not, but nonetheless that's where I found it.
    Never underestimate the power of right click -> view source. :-)

  10. #10
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    0
    petar_chan is on a distinguished road

      0  

    Default


    in view source never mention for a VerticalPanel.js but very easy with firebug and seeing witch js files are loading. Very lame question by me. But good work with this plug-in, Monkee. :-)

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