Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: ExtJS 4.1.1a tabConfig in defaults causes tabs to share some code

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29

    Default ExtJS 4.1.1a tabConfig in defaults causes tabs to share some code

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.1.1a
    • Ext 4.1.1 (see jsfiddle)
    Browser versions tested against:
    • Chrome 22.0.1229.79m
    DOCTYPE tested against:
    • HTML
    Description:
    • putting tabConfig in container's defaults field or in Ext.define's template object parameter causes tabConfig to be shared among tabs created either by this container (tabConfig put in defaults) or tabs created by defined class (Ext.define case)
    Steps to reproduce the problem:
    • Create a tabbar with defaults: { tabConfig {closable: true }} or
    • Ext.define('NewTabClass', {extend: 'Ext.tab.Tab'tabConfig: { closable: true}}
    • open and close a few tabs in tabbar
    The result that was expected:
    • after opening and closing all tabs, tabpanel's item collection should be empty
    The result that occurs instead:
    • tabpanel's item collection is not empty
    Test Case:
    http://jsfiddle.net/XzftL/4/
    http://jsfiddle.net/Vrjwt/2/

    HELPFUL INFORMATION

    note that doing tabpanel.remove() works just fine, just closing by clicking the button is bugged

    Debugging already done:

    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • Windwos 7

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,239

    Default

    You should avoid putting objects/arrays on the class definition, otherwise they get shared across all instances. Instead, add them in initComponent.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29

    Default

    First jsFiddle shows case with defaults put in object, not class definition. If that should be avoided too then please state it correctly in api documentation

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,392

    Default

    The closable config should go on the child item not the tab config. Here is an example:

    Code:
    Ext.onReady(function () {
        var tabpanel = Ext.create('Ext.tab.Panel', {
            defaults: {
                closable: true
            },
            renderTo: Ext.getBody()
        });
            
        var tab1 = tabpanel.add(Ext.create('Ext.tab.Tab', { title: 'Tab 1' })),
            tab2 = tabpanel.add(Ext.create('Ext.tab.Tab', { title: 'Tab 2' })),
            tab3 = tabpanel.add(Ext.create('Ext.tab.Tab', { title: 'Tab 3' })),
            tab4 = tabpanel.add(Ext.create('Ext.tab.Tab', { title: 'Tab 4' }));
        
        var button = Ext.create('Ext.button.Button', {
            text: 'close all tabs and click me!',
            handler: function () {
                alert(tabpanel.items.getCount())
            },
            renderTo: Ext.getBody()
        });
    });
    Try that and you will get zero.

    Also, you shouldn't add instances of Ext.tab.Tab, you should be adding actual child items like a component, grid, form, etc and the tab panel will create an instance of Tab for each of them and add it to the tab bar, you shouldn't do that.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29

    Default

    you're right with adding tabs, hopefully i made that mistake only in examples. Also you're right that closable should belong to item's configuration.
    But what if i'd like to change tab's xtype in defaults? as far as i know, that can be only done trough tabConfig, and here comes the problem.

    I've "fixed" it in my project by overriding tabpanel's onAdd instead of using defaults config, but i think we can agree that it's not the preferred way to do that

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,392

    Default

    If you want your own tab component to be used set the defaultType config in the tabBar config

    Code:
    tabBar : {
        defaultType : 'somextype'
    }
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #7
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29

    Default

    ... i have a bad time with jsfiddles today, wrong link in last post: http://jsfiddle.net/aWCY7/2/

  8. #8
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,392

    Default

    I have updated your fiddle and added a couple comments. Ext.tab.Panel has a default config that has the xtype : 'tab' so that's why the defaultType will not work, IMO we shouldn't have the xtype in the defaultConfig. Also note, that you have the closable config set on your tab extension, this will not have any affect as there is a default config also for the closable config that looks at if you set the closable config on the item so it will always override the closable config on your tab class.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #9
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29

    Default

    Thank you for your reply.

    As I understood your answer, it's not possible to specify default tab's xtype in neither tabpanel's defaults or tabbar's. Is there any chance for this to get changed?

  10. #10

    Default Does this work?

    Quote Originally Posted by mitchellsimoens View Post
    If you want your own tab component to be used set the defaultType config in the tabBar config

    Code:
    tabBar : {
        defaultType : 'somextype'
    }
    I want to do exactly this - use mycustomtabs within a tabbar, but the defaultType config doesn't seem to work. I even changed the source code in Ext.tab.Bar to defaultType:'cabbage' which has no effect. Either defaultType is not used or I'm missing something.

    ---

    I've just checked Ext.tab.Panel and the tabs appear to be added there:

    Code:
    onAdd: function(item, index) {
            var me = this,
                cfg = item.tabConfig || {},
                defaultConfig = {
                    xtype: 'tab',
                    ui: me.tabBar.ui,
                    card: item,
                    disabled: item.disabled,
                    closable: item.closable,
                    hidden: item.hidden && !item.hiddenByLayout, // only hide if it wasn't hidden by the layout itself
                    tooltip: item.tooltip,
                    tabBar: me.tabBar,
                    position: me.tabPosition,
                    closeText: item.closeText
                };
    
            cfg = Ext.applyIf(cfg, defaultConfig);
    
            // Create the correspondiong tab in the tab bar
            item.tab = me.tabBar.insert(index, cfg);
    ...
    }
    Do I need to extend Ext.tab.Panel and replace OnAdd to use a different xtype?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •