Hybrid View

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default Add new tab button in tab strip

    Add new tab button in tab strip


    Usage:

    Code:
            plugins: [ Ext.ux.AddTabButton ],
            createTab: function() { // Optional function which the plugin uses to create new tabs
                return {
                    title: 'New Tab',
                    closable: true
                };
            },
    Obviously it just creates a new defaultType (whatever you configure that to for your TabPanel - defaults to Ext.Panel). It's up to you to access the newly added item and manipulate it.

    Code:
    Ext.ux.AddTabButton = (function() {
        function onTabPanelRender() {
            this.addTab = this.itemTpl.insertBefore(this.edge, {
                id: this.id + 'addTabButton',
                cls: 'add-tab',
                text: this.addTabText || '&#160',
                iconCls: ''
            }, true);
            this.addTab.child('em.x-tab-left').setStyle('padding-right', '6px');
            this.addTab.child('a.x-tab-right').setStyle('padding-left', '6px');
            new Ext.ToolTip({
                target: this.addTab,
                bodyCfg: {
                    html: 'Add new tab'
                }
            });
            this.addTab.on({
                mousedown: stopEvent,
                click: onAddTabClick,
                scope: this
            });
        }
    
        function createScrollers() {
            this.scrollerWidth = (this.scrollRightWidth = this.scrollRight.getWidth()) + this.scrollLeft.getWidth();
        }
    
        function autoScrollTabs() {
            var scrollersVisible = (this.scrollLeft && this.scrollLeft.isVisible()),
                pos = this.tabPosition == 'top' ? 'header' : 'footer';
            if (scrollersVisible) {
                if (this.addTab.dom.parentNode === this.strip.dom) {
                    if (this.addTabWrap) {
                        this.addTabWrap.show();
                    } else {
                        this.addTabWrap = this[pos].createChild({
                            cls: 'x-tab-strip-wrap',
                            style: {
                                position: 'absolute',
                                right: (this.scrollRightWidth + 1) + 'px',
                                top: 0,
                                width: '30px',
                                margin: 0
                            }, cn: {
                                tag: 'ul',
                                cls: 'x-tab-strip x-tab-strip-' + this.tabPosition,
                                style: {
                                    width: 'auto'
                                }
                            }
                        });
                        this.addTabWrap.setVisibilityMode(Ext.Element.DISPLAY);
                        this.addTabUl = this.addTabWrap.child('ul');
                    }
                    this.addTabUl.dom.appendChild(this.addTab.dom);
                    this.addTab.setStyle('float', 'none');
                }
                this.stripWrap.setWidth(this[pos].getWidth(true) - (this.scrollerWidth + 31));
                this.stripWrap.setStyle('margin-right', (this.scrollRightWidth + 31) + 'px');
            } else {
    //          
                if ((this.addTab.dom.parentNode !== this.strip.dom)) {
                    var notEnoughSpace = (((this[pos].getWidth(true) - this.edge.getOffsetsTo(this.stripWrap)[0])) < 33)
                    this.addTabWrap.hide();
                    this.addTab.setStyle('float', '');
                    this.strip.dom.insertBefore(this.addTab.dom, this.edge.dom);
                    this.stripWrap.setWidth(this.stripWrap.getWidth() + 31);
                    if (notEnoughSpace) {
                        this.autoScrollTabs();
                    }
                }
            }
        }
    
        function autoSizeTabs() {
            this.addTab.child('.x-tab-strip-inner').setStyle('width', '14px');
        }
    
        function stopEvent(e) {
            e.stopEvent();
        }
    
        function onAddTabClick() {
            this.setActiveTab(this.add(this.createTab? this.createTab() : {
                title: 'New Tab'
            }));
        }
    
        return {
            init: function(tp) {
                if (tp instanceof Ext.TabPanel) {
                    tp.onRender = tp.onRender.createSequence(onTabPanelRender);
                    tp.createScrollers = tp.createScrollers.createSequence(createScrollers);
                    tp.autoScrollTabs = tp.autoScrollTabs.createSequence(autoScrollTabs);
                    tp.autoSizeTabs = tp.autoSizeTabs.createSequence(autoSizeTabs);
                }
            }
        };
    })();

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    excellent dude.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    193
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    thank you, thats sooo cool, but how can i use iconCls: 'add' ?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, now you can configure your TabPabel with

    Code:
        addTabText: '+'
    To use text in the add tab button.

    Or, use the class to give it an icon eg

    Code:
        div.x-tab-strip-wrap .add-tab a span.x-tab-strip-inner {
            background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
        }
    To give


  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    16
    Vote Rating
    0
    jocampo is on a distinguished road

      0  

    Default


    Hi Animal,

    There is a way to add buttons with right aligment, independent of the aligment of the tabs. I mean, all the tabs would be with left aligment and the new tab buttons with right aligment??

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    Animal, very nice

    The tab was very narrow so I changed the css to:

    HTML Code:
    div.x-tab-strip-wrap .add-tab a span.x-tab-strip-inner {
        width:26px;
        background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
    }
    Thanks, Marty

  7. #7
    Sencha User
    Join Date
    Dec 2008
    Posts
    27
    Vote Rating
    0
    hitekshu is on a distinguished road

      0  

    Default


    Hi Animal,
    First of all i would like to thank you for providing this plugin.

    I am getting an error in Firebug when i click on the Add button
    item is undefined
    anonymous(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 30044)
    anonymous(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 30065)
    h()ext-all-debug.js (line 4615)
    [Break on this error] if(item.disabled){\n


    This is the code in Ext-all-debug.js where the error points
    30044 if(item.disabled){
    30045 return {
    30046 close : null,
    30047 item : null,
    30048 el : null
    30049 };
    30050 }
    30051 }
    What is this, and how can i solve it?

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Posts
    27
    Vote Rating
    0
    hitekshu is on a distinguished road

      0  

    Default


    Got it fixed. I hadmissed the implementation of stopEvent function on mouseDown

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    219
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    very good indeed ! Thank you!

  10. #10
    Sencha User
    Join Date
    Sep 2007
    Posts
    95
    Vote Rating
    1
    adam.jimenez is on a distinguished road

      0  

    Default


    This plugin is great. Has anyone got it working in Ext4?

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