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
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    61
    Vote Rating
    0
    jeroenooms is on a distinguished road

      0  

    Default


    Hi Animal,

    this is great. I would like to replicate the example from the screenshot you posted, however, there is a small rendering problem now. I'm using ext 3.2.1. I can display the whole icon by setting a higher width in css, but there is still something weird going on between the tabs and the '+' button. Could you maybe take a quick look? Other than that, fantastic work!

  8. #8
    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


    Poke it with Firebug and see what styles it needs.

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    61
    Vote Rating
    0
    jeroenooms is on a distinguished road

      0  

    Default


    Ah I just found out that it is not because of the ext version but because of the tabPosition: 'bottom'.

  10. #10
    Sencha User
    Join Date
    Jan 2009
    Location
    Manchester, UK
    Posts
    21
    Vote Rating
    0
    ody is on a distinguished road

      0  

    Default


    Cheers Animal!

    I've cut down what you done as I just needed the button to allow someone to click it which calls a callback function that adds a new tab to the tabpanel. I think it is correct ..

    PHP Code:
    Ext.ux.AddTabButton = (function() {
        function 
    onTabPanelRender() {
            
    this.addTab this.itemTpl.insertBefore(this.edge, {
                
    idthis.id 'addTabButton',
                
    cls'add-tab',
                
    textthis.addTabText || ' ',
                
    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({
                
    targetthis.addTab,
                
    bodyCfg: {
                    
    html'New tab'
                
    }
            });
            
    this.addTab.on({
                
    clickthis.onAddTabClick,
                
    scopethis
            
    });
        }

        return {
            
    init: function(tp) {
                if (
    tp instanceof Ext.TabPanel) {
                    
    tp.onRender tp.onRender.createSequence(onTabPanelRender);
                }
            }
        };
    })(); 
    Which uses the config options in the tabpanel:

    PHP Code:
    plugins: [ Ext.ux.AddTabButton ],
    onAddTabClick : function(){ someFunctionThatAddsNewTab(); } 

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