TabPanel uses initial config for title & other card attributes instead of getters

[sencha-noob]

REQUIRED INFORMATION
Ext version tested:

• Sencha Touch 2.0.0 commercial

Browser versions tested against:

• Chrome 19.0.1061.1 dev

DOCTYPE tested against:

• html

Description:

• I'm using "applyTitle()" on panel to alter the title slightly. It turns out that when that panel is added to a tabPanel, it uses the initialconfig instead of the title returned by card.getTitle(). What's the point of setters, getters, appliers, & updaters if the api doesn't use them consistently.

Steps to reproduce the problem:

• Override panel to add an applyTitle function. Use that function to alter the title.
• Add the panel to a tabPanel.

The result that was expected:

• The title as returned from applyTitle be used everywhere consistently, including the tab button

The result that occurs instead:

• initialConfig['title'] is used for tab button title instead

Ext.tab.Panel Source:
Below is the offending code. Not sure which of the attributes should use getters, I assume all, but I only care about title.

onItemAdd: function(card) {
        var me = this;


        if (!card.isInnerItem()) {
            return me.callParent(arguments);
        }


        var tabBar             = me.getTabBar(),
            initialConfig      = card.getInitialConfig(),
            tabConfig          = initialConfig.tab || {},
            tabTitle           = initialConfig.title,                   <<<<<<< ugh
            tabIconCls         = initialConfig.iconCls,
            tabHidden          = initialConfig.hidden,
            tabDisabled        = initialConfig.disabled,
            tabBadgeText       = initialConfig.badgeText,
            innerItems         = me.getInnerItems(),
            index              = innerItems.indexOf(card),
            tabs               = tabBar.getItems(),
            cards              = me.getInnerItems(),
            currentTabInstance = (tabs.length >= cards.length) && tabs.getAt(index),
            tabInstance;


        if (tabTitle && !tabConfig.title) {
            tabConfig.title = tabTitle;
        }


        if (tabIconCls && !tabConfig.iconCls) {
            tabConfig.iconCls = tabIconCls;
        }


        if (tabHidden && !tabConfig.hidden) {
            tabConfig.hidden = tabHidden;
        }


        if (tabDisabled && !tabConfig.disabled) {
            tabConfig.disabled = tabDisabled;
        }


        if (tabBadgeText && !tabConfig.badgeText) {
            tabConfig.badgeText = tabBadgeText;
        }


        //<debug warn>
        if (!currentTabInstance && !tabConfig.title && !tabConfig.iconCls) {
            if (!tabConfig.title && !tabConfig.iconCls) {
                Ext.Logger.error('Adding a card to a tab container without specifying any tab configuration');
            }
        }
        //</debug>


        tabInstance = Ext.factory(tabConfig, Ext.tab.Tab, currentTabInstance);


        if (!currentTabInstance) {
            tabBar.insert(index, tabInstance);
        }


        card.tab = tabInstance;


        me.callParent(arguments);
    },

[Jamie Avins]

The was one of the first (if not the very first) component that was changed to 2.0. This may just be some code that wasn't done properly. I'm not sure why it's done this way, unless it's for a very good reason, I'll change it.

[Jamie Avins]

Ok, after discussing this with Jacky, there are reasons it is done this way. Primarily because title and the other options that TabPanel uses don't exist as configs on most components. You should be able to get the functionality you need with something like the following:

    Ext.define('My.custom.Tab', {
    	extend: 'Ext.tab.Tab',

    	applyTitle: function(title) {
    		return 'foo-' + title;
    	}
    });

    Ext.application({
        launch: function() {
            Ext.Viewport.add({
                xtype: 'tabpanel',
            	items: [{
                        xtype: 'panel',
            		tab: {
            			xclass: 'My.custom.Tab'
            		},
            		title: 'Something'
            	}]
            });
        }
    });

By specifying a tab config, you can create a custom Tab handler which can be customized to your needs.

We will create some additional documentation to help address this in the future.

[sencha-noob]

Hmm, could you elaborate a little? It seems to me since there are examples out there using applyTitle & updateTitle, anything that makes use of the title should work appropriately.

If the title or other items don't exist on some components that means it shouldn't be in the initialConfig either?

It seems like the existence of the getTitle() could be checked first, then called if it exists, if the concern is that the getter might not exist.

If this can be handled seamlessly in the API, it seems like it should be, in order to support the well intended config, setter, apply, etc system that has been built.

I solved the problem by overriding a tabpanel method, so that it works as one expects. I'll post the code shortly.

[sencha-noob]

Wouldn't something like this solve the dilema in TabPanel.onItemAdd?

    ...
    var tabBar = me.getTabBar(),
    initialConfig = card.getInitialConfig(),
    tabConfig = initialConfig.tab || {},

    tabTitle = card.getTitle ? card.getTitle() : null,

    tabIconCls = initialConfig.iconCls,
    tabHidden = initialConfig.hidden,
    tabDisabled = initialConfig.disabled,
    tabBadgeText = initialConfig.badgeText,
    ...

If the getter doesn't exist, than it should fail the first part, returning null. If it does exist, it'll try it as a function & return the appropriate value.

So long as card is an object, it shouldn't error out if getTitle isn't defined.

And it seems like if there's no getter, than there shouldn't be anything in the initialConfig. If that's not the case, the initial config value could be returned instead of null when getTitle is undefined.

Thanks for looking into this.

[Jamie Avins]

This is another way of handling it, we'll discuss it internally to see if this approach is something we want to support.

[sencha-noob]

Thanks

[sencha-noob]

This issue should be changed from fixed to open while you continue to consider changes. It would help a lot if you could elaborate on the conflict with fixing this.

From the outside, it seems like a no-brainer

1. There's an API that uses setters, getters, appliers, & updaters which is really convenient;
2. There are examples of how to use that functionality with titles in particular;
3. There are bits of the api internally that do not use them as described;
4. There's an easy way to implement an apparent fix;
5. Therefore, it's a bug.

Anyhow, for others looking for a consistent API experience, here's the override hack so it works as one would expect without having to manhandle the tab button for every tabpanel item as offered above.

Ext.define("common.override.TabPanel", {
    override: "Ext.tab.Panel",

    // Tab Panel incorrectly uses initialConfig.title for the button title
    // Breaks any customizations done with applyTitle on panel
    onItemAdd: function(card) {

        // Turns out overriden functions will call the original when you call
        // this.callParent('func') as documented in api docs about callParent, but means
        // can't simply "override" the original, since it needs a call parent at the end

        // Adding a tab instance with a title; ugly hack
        var initialConfig = card.getInitialConfig();

        if (card.getTitle) {
            initialConfig.tab = {
                title: card.getTitle()
            };
        }

        // There's a getInitialConfig, but no setInitialConfig?
        card.initialConfig = initialConfig;

        this.callParent(arguments);
    }
});

[Jamie Avins]

Sorry, this was closed because we implemented it

The same issue came up in NavigationView so we corrected the problem in both cases. Looks like Rob only responded to the thread in NavigationView and not this thread.

[sencha-noob]

Great Is there a dev release download to pickup these bug fixes or should I wait for the next official release? If the latter, any idea when that will be released?Thanks again.