1. #1
    Sencha User beavx420's Avatar
    Join Date
    May 2007
    Location
    New Jersey
    Posts
    32
    Vote Rating
    1
    beavx420 is on a distinguished road

      1  

    Default Ext.ux.tab.Toolbar - Inline tab toolbar

    Ext.ux.tab.Toolbar - Inline tab toolbar


    We used a modified version of a similar extension for ExtJS v3 (that never quite worked right)... took a few minutes to upgrade and figured it would be nice to share!

    Basically it will create a toolbar inline with the tabs of a tab panel. Right now it only docks the toolbar to the right-side of the tabbar and you must define the width of the toolbar otherwise it won't work properly (couldn't figure out how to get the size of the toolbar)

    TabToolbar.jpg

    Sample:
    Code:
    Ext.define('TestTabs', {
        extend: 'Ext.tab.Panel',
        requires: [
            'Ext.ux.tab.Toolbar'
        ],
    
        initComponent: function() {
            Ext.apply(this, {
                activeTab: 0,
                plugins: [
                    Ext.create('Ext.ux.tab.Toolbar', {
                        width: 180,
                        items: [{
                            text: 'New Page',
                            tooltip: 'Add a new page to hold widgets'
                        }, {
                            text: 'Reset Layout',
                            tooltip: 'Restores the default layout'
                        }]
                    })
                ],
                items: [{
                    title: 'Test Tab'
                }]
            });
    
            this.callParent();
        }
    });
    Plugin Code:
    Code:
    /**
     * @class Ext.ux.tab.Toolbar
     * @extends Object
     * Plugin (ptype = 'tabtoolbar') for adding a toolbar to a TabBar.
     * @constructor
     * @param {Object} config Configuration options
     * @ptype tabtoolbar
     */
    Ext.define('Ext.ux.tab.Toolbar', {
        alias: 'plugin.tabtoolbar',
    
        constructor: function(config) {
            config = config || {};
            Ext.apply(this, config);
        },
    
        /**
         * @cfg {String} position The position where the toolbar will appear inside the tabbar. Supported values are
         * 'left' and 'right' (defaults to right).
         */
        position: 'right',
    
        //private
        init: function(tabPanel) {
            var me = this;
    
            Ext.apply(tabPanel, me.parentOverrides);
            me.tabPanel = tabPanel;
            me.tabBar = tabPanel.tabBar;
    
            // ensure we have a valid position
            if (this.position !== 'left') {
                this.position = 'right';
            }
    
            me.tabBar.on({
                afterlayout: function() {
                    me.layout = me.tabBar.layout;
    
                    // we need to subtract the toolbar width from this function result
                    me.layout.getLayoutTargetSize = Ext.Function.bind(me.getLayoutTargetSize, me);
    
                    var scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-' + this.position),
                        contentEl = me.tabBar.body.createChild({
                            style: 'width:' + this.width + 'px;',
                            cls: Ext.baseCSSPrefix + 'tab-toolbar-' + this.position
                        }, scrollerEl);
    
                    // if scroller is not created (only one tab)
                    // we need to add the floating style to the tab bar
                    if (scrollerEl == undefined) {
                        me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-inner').setStyle({
                            float: this.position == 'left' ? 'right' : 'left'
                        })
                    }
    
                    me.toolbar = new Ext.toolbar.Toolbar({
                        cls: 'x-tab-toolbar',
                        renderTo: contentEl,
                        items: this.items || []
                    });
                },
                scope: this,
                single: true
            });
        },
    
        /**
         * Override the default getLayoutTargetSize of the tabbar layout so we
         * can subtract the width of the toolbar
         */
        getLayoutTargetSize: function() {
            var me = this,
                result = Ext.getClass(me.layout).prototype.getLayoutTargetSize.apply(me.layout, arguments);
    
            result.width -= this.width;
            return result;
        }
    
    });
    Plugin CSS:
    Code:
    /**
     * Ext.ux.tab.Toolbar styles
     */
    .x-tab-toolbar-right { z-index: 6; float: right; }
    .x-tab-toolbar-right .x-tab-toolbar { padding: 0 2px; border-width: 0 0 0 1px; }
    .x-tab-toolbar-left { z-index: 6; float: left; }
    .x-tab-toolbar-left .x-tab-toolbar { padding: 0 2px; border-width: 0 1px 0 0; }
    I included a screenshot that shows off the plugin in action. Any improvements are welcomed...

    Thanks!
    Last edited by beavx420; 12 Jul 2011 at 4:45 AM. Reason: Updated to fix typo and add position configuration option

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    afernandes.ng is on a distinguished road

      0  

    Default


    I detect a little error..

    scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-right')

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Manchester, United Kingdom
    Posts
    19
    Vote Rating
    0
    kreeve_ctisn is on a distinguished road

      0  

    Default


    beavx420,

    if you replace the Ext.toolbar.Toolbar creation code with the following, it will then auto compute the width.

    PHP Code:
     me.toolbar = new Ext.toolbar.Toolbar({
                                
    cls'x-tab-toolbar',
                                
    renderTocontentEl,
                                
    itemsthis.items || [],
                                
    listeners: {
                                    
    'afterrender': function() {
                                        var 
    tb this;
                                        var 
    tb.getWidth(),
                                              
    nw 0;

                                        
    tb.items.each(function(item) { nw += item.getWidth(); });
                                        if (
    nw) {
                                            
    tb.setWidth(nw+w);
                                        }
                                    }
                                }
                            }); 
    Many thanks for creating this plugin
    Last edited by kreeve_ctisn; 11 Jul 2011 at 8:32 AM. Reason: Fixes for calculations beng short by original width

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Manchester, United Kingdom
    Posts
    19
    Vote Rating
    0
    kreeve_ctisn is on a distinguished road

      0  

    Default


    Seems my previous fix, fixes the toolbar but not it's container.

    Will investigate a fix.

  5. #5
    Sencha User beavx420's Avatar
    Join Date
    May 2007
    Location
    New Jersey
    Posts
    32
    Vote Rating
    1
    beavx420 is on a distinguished road

      0  

    Default Updated

    Updated


    Thanks guys!!

    I updated the original post... fixed the typo and added a 'position' config option that allows the toolbar to sit on either the left or right side of the tabbar

  6. #6
    Sencha User
    Join Date
    Feb 2008
    Posts
    23
    Vote Rating
    1
    Buzzwords is on a distinguished road

      0  

    Default Very nice work. Problem with tab scrolling though.

    Very nice work. Problem with tab scrolling though.


    I really like this plugin but tab scroller buttons still appear in their normal positions. When the toolbar is present the scrollers should be confined to the sides of the tabs. I'm using the default tab-toolbar position:'right', and the tab scroller on the right appears to the right of the tab-toolbar. I'd like to see it appear to the left of the tab-toolbar in this case. I'll edit this post if I come up with a solution.

    That said, this functionality (the tab-toolbar) could be very useful. It saves vertical space by not having to include another toolbar. It also provides a way to specify a button that can return the user to a default tab. If not this solution then it'd be great to have some way to lock one or more tabs (going from the left) in place, so that the others scroll but locked tabs remain visible.

  7. #7
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default


    good job~
    an question:
    I want to show tab title as a splitbutton with menu
    so give tabConfig:{menu:[{text: 'Item 1'},{text: 'Item 2'}]} to panel
    click title can show menu, but arrow is missing,I think it's css problem.
    anyone could help,thanks
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  8. #8
    Sencha User
    Join Date
    May 2011
    Location
    Manchester, United Kingdom
    Posts
    19
    Vote Rating
    0
    kreeve_ctisn is on a distinguished road

      0  

    Wink


    small update, I noticed that since the toolbar is not linked to the tab panel it's actually left behind in memory..

    Have added the following code to the listeners and this fixes it
    Code:
    beforedestroy: function() {
        me.toolbar.destroy();
    },
    This makes the full plugin as follows:
    Code:
    /**
     * @class Ext.ux.tab.Toolbar
     * @extends Object
     * Plugin (ptype = 'tabtoolbar') for adding a toolbar to a TabBar.
     * @constructor
     * @param {Object} config Configuration options
     * @ptype tabtoolbar
     */
    Ext.define('Ext.ux.tab.Toolbar', {
        alias: 'plugin.tabtoolbar',
    
        constructor: function(config) {
            config = config || {};
            Ext.apply(this, config);
        },
    
        /**
         * @cfg {String} position The position where the toolbar will appear inside the tabbar. Supported values are
         * 'left' and 'right' (defaults to right).
         */
        position: 'right',
    
        //private
        init: function(tabPanel) {
            var me = this;
            var toolbarId = me.id;
            delete me.id;
    
            Ext.apply(tabPanel, me.parentOverrides);
            me.tabPanel = tabPanel;
            me.tabBar = tabPanel.tabBar;
    
            // ensure we have a valid position
            if (this.position !== 'left') {
                this.position = 'right';
            }
    
            me.tabBar.on({
                afterlayout: function() {
                    me.layout = me.tabBar.layout;
    
                    // we need to subtract the toolbar width from this function result
                    me.layout.getLayoutTargetSize = Ext.Function.bind(me.getLayoutTargetSize, me);
    
                    var scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-' + this.position),
                        contentEl = me.tabBar.body.createChild({
                            style: 'width:' + this.width + 'px;',
                            cls: Ext.baseCSSPrefix + 'tab-toolbar-' + this.position
                        }, scrollerEl);
    
                    // if scroller is not created (only one tab)
                    // we need to add the floating style to the tab bar
                    if (scrollerEl == undefined) {
                        me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-inner').setStyle({
                            'float': this.position == 'left' ? 'right' : 'left'
                        })
                    }
    
                    me.toolbar = new Ext.toolbar.Toolbar({
                        cls: 'x-tab-toolbar',
                        renderTo: contentEl,
                        items: this.items || [],
                        id: toolbarId
                    });
                },
                beforedestroy: function() {
                    me.toolbar.destroy();
                },
                scope: this,
                single: true
            });
        },
    
        /**
         * Override the default getLayoutTargetSize of the tabbar layout so we
         * can subtract the width of the toolbar
         */
        getLayoutTargetSize: function() {
            var me = this,
                result = Ext.getClass(me.layout).prototype.getLayoutTargetSize.apply(me.layout, arguments);
    
            result.width -= this.width;
            return result;
        }
    
    });

  9. #9
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    Austin, TX
    Posts
    112
    Vote Rating
    0
    zillabyte is on a distinguished road

      0  

    Default


    Thanks for your contribution. Got this working pretty easily. One thing, when you resize the browser the buttons don't resize with the tab panel. Not sure if this should be done by the tab panel or the plugin.

  10. #10
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    38
    Vote Rating
    0
    PHaroZ is on a distinguished road

      0  

    Default


    Due to layout reengineering in Ext4.1 this plugin need to fixed.

    My work :
    Code:
    Ext.define('Ext.ux.tab.Toolbar', {
        alias : 'plugin.tabtoolbar',
    
        constructor : function(config) {
            Ext.apply(this, config || {});
        },
    
        /**
         * @cfg {String} position The position where the toolbar will appear inside the tabbar. Supported values are
         *      'left' and 'right' (defaults to right).
         */
        position : 'right',
    
        // private
        init : function(tabPanel) {
            var me = this;
            var toolbarId = me.id;
            delete me.id;
    
            Ext.apply(tabPanel, me.parentOverrides);
            me.tabPanel = tabPanel;
            me.tabBar = tabPanel.tabBar;
    
            // ensure we have a valid position
            if (this.position !== 'left') {
                this.position = 'right';
            }
    
            me.tabBar.on({
                afterlayout : function() {
                    me.layout = me.tabBar.layout;
    
                    // we need to subtract the toolbar width from this function result
                    me.layout.availableSpaceOffset += this.width;
    
                    var scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-' + this.position), contentEl = me.tabBar.body
                            .createChild({
                                        style : 'width:' + this.width + 'px;',
                                        cls : Ext.baseCSSPrefix + 'tab-toolbar-' + this.position
                                    }, scrollerEl);
    
                    // if scroller is not created (only one tab)
                    // we need to add the floating style to the tab bar
                    if (scrollerEl == undefined) {
                        me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-inner').setStyle({
                                    'float' : this.position == 'left' ? 'right' : 'left'
                                })
                    }
    
                    me.toolbar = new Ext.toolbar.Toolbar({
                                cls : 'x-tab-toolbar',
                                renderTo : contentEl,
                                items : Ext.Array.from(this.items),
                                id : toolbarId
                            });
                },
                beforedestroy : function() {
                    me.toolbar.destroy();
                },
                scope : this,
                single : true
            });
        }
    
    });
    Thanks for this usefull plugin,

    PHaroZ

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