[B3] Two exact config'd TabPanels not rendered the same

[hallikpapa]

Here are my two TabPanels, one is rendered correctly, the other isn't.

Renders Correctly

Ext.define('APP.view.links.RightTabs', {
    extend: 'Ext.TabPanel',
    config: {
        tabBar: {
            docked: 'top',
            layout: {
                pack: 'center'
            }
        },
        ui: 'dark',
        cardSwitchAnimation: {
            type: 'slide'
        },
        items: [{
            title: 'Right Color 1',
            xtype : 'panel'
        },{
            title: 'Right Color 2',
            xtype : 'panel'
        },{
            title: 'Right Color 3',
            xtype : 'panel'
        }]
    }
});

Renders Incorrectly

Ext.define('APP.view.content.WrongTabs', {
    extend: 'Ext.TabPanel',
    xtype : 'contenWrongTabs',
    config: {
        tabBar: {
            docked: 'top',
            layout: {
                pack: 'center'
            }
        },
        ui: 'dark',
        cardSwitchAnimation: {
            type: 'slide'
        },
        items: [{
            xtype: 'panel',
                title: 'Wrong Color 1'
            },{
                xtype: 'panel',
                title: 'Wrong Color 2'
            },{
                xtype: 'panel',
                title: 'Wrong Color 3'
        }]
    }
});

I have also attached a screenshot so you can see what's happening.
sencha-css-tabs.png

Here is the CSS that is rendered when I open the Chrome Developer Tools & highlight the 'span' tag that holds the text for a tab in each of the TabPanel(s). IE: Both TabPanel(s) are using the exact same CSS:

element.style {
}
Matched CSS Rules
.x-tabbar.x-docked-top .x-button-label, .x-tabbar.x-docked-top .x-hasbadge .x-badge, .x-hasbadge .x-tabbar.x-docked-top .x-badge {
font-size: .8em;
line-height: 1.2em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.x-button-label, .x-hasbadge .x-badge {
-webkit-box-flex: 1;
box-flex: 1; #THIS HAS A STRIKETHROUGH
-webkit-box-align: center;
box-align: center; #THIS HAS A STRIKETHROUGH 
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
font-weight: bold;
line-height: 1.2em; #THIS HAS A STRIKETHROUGH
display: block;
overflow: hidden;
}
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none; #THIS HAS A STRIKETHROUGH
-webkit-user-drag: none;
}
Pseudo ::before element
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none; #THIS HAS A STRIKETHROUGH
-webkit-user-drag: none;
}
Pseudo ::after element
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none; #THIS HAS A STRIKETHROUGH
-webkit-user-drag: none;
}
Inherited from div#ext-tab-4.x-tab.x-tab-normal.x-tab-active
.x-tabbar-dark.x-docked-top .x-tab-active {
color: white;
}
.x-tabbar-dark .x-tab-active {
color: white;
}
.x-tabbar-dark .x-tab {
color: rgb(90, 129, 175);
}
Inherited from body#ext-element-2.x-desktop.x-windows.x-chrome.x-landscape
body.x-desktop {
font-size: 114%;
}
body {
font-size: 104%;
}
html, body {
font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
font-weight: normal;
}
Inherited from html
html, body {
font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
font-weight: normal;
}

The funny thing is, when I uncheck the text-rendering: optimizeLegibility in the Developer Tools in Chrome, the colors look correct on the TabPanel that is too dark. Is this a bug? Anything special I need to do to fix this?

I will also note that I did a search in the entire project for this string

ui:

And made sure they were all set to ui: 'dark', in case of something weird. But that is also why I clicked on each button down to the <span> tag that contained the text label for each tab and compared the CSS line by line. It's so strange.

[mitchellsimoens]

Let's talk about how you create these. I see that WrongTabs has an xtype where RightTabs does not. So is WrongTabs a child of something and/or being created using the xtype where RightTabs is being created off the class name? Shouldn't matter but that is the only difference and to look at what is going on I would like to know how these are being created.

[hallikpapa]

I am using a stripped down version of the KitchenSink Demo. Where when I click on a leaf in the NestedList, it checks to see if that view has already been created and cached, if not it creates one, then adds it to the to the main view container. Both views (all views in the app in fact) are created in this way.

I will also add I put an xtype in the RightTabs just in case (I would need it in the future anyways) and I still got the same results.

Here is the code that does that

/**
     * This is called whenever the user taps on an item in the main navigation List
     */
    onNavTap: function(list, index) {
        var record = list.getStore().getAt(index);
        
        if (record.isLeaf()) {
            this.showView(record);
        }
    },
    showView: function(item) {
        var nav  = this.getNav(),
            main = this.getMain(),

            mainLayout  = main.getLayout(),
            initialAnim = mainLayout.getAnimation();
            
        //FIXME: Hack for returning to homescreen
        var view = undefined;
        if (item.get('id') == 'homescreen') {
            view = this.getHome();
        } else {
            view = this.createView(this.getViewName(item));
            var anim = item.get('animation');
        }

        if (anim) {
            mainLayout.setAnimation(anim);
        }

        nav.setDetailContainer(main);
        nav.setDetailCard(view);
        nav.goToNode(item.parentNode);
        nav.goToLeaf(item);
        nav.getActiveItem().select(item);

        if (anim) {
            mainLayout.setAnimation(initialAnim);
        }
        this.getToolbar().setTitle(item.get('text'));
        nav.goToNode(item.parentNode);
        nav.goToLeaf(item);
    },

    createView: function(name) {
        var cache = this.getViewCache(),
            ln = cache.length,
            limit = 20,
            view, i, oldView;

        Ext.each(cache, function(item) {
            if (item.viewName === name) {
                view = item;
                return;
            }
        }, this);

        if (view) {
            return view;
        }

        if (ln >= limit) {
            for (i = 0; i < ln; i++) {
                oldView = cache[i];
                if (!oldView.isPainted()) {
                    oldView.destroy();
                    cache.splice(i, 1);
                    break;
                }
            }
        }

        view = Ext.create(name);
        view.viewName = name;
        cache.push(view);
        this.setViewCache(cache);

        return view;
    },

As an additional note, the RightTabs is a "top level" component, meaning it is placed directly into the main view. The WrongTabs is a child of a container, separated by a vbox. 'APP.view.content.Words' is what is actually created by the controller methods in this post. Here is that setup:

Ext.define('APP.view.content.Words', {
    extend: 'Ext.Container',
    xtype : 'contentWords',
    config: {
        title: 'Words',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        ui: 'dark',
        cardSwitchAnimation: {
            type: 'slide'
        },
        items: [{
            flex        : 1,
            scrollable  : true,
            xtype       : 'touchgridpanel',
            store       : 'Words',
            columns    : [{
                header   : "ID",
                dataIndex : 'id',
                style    : "text-align: center;",
                width     : '10%'
            },{
                header   : "Text",
                dataIndex: 'text',
                style    : "text-align: center;",
                width     : '55%'
            },{
                header   : "Best Position",
                dataIndex: 'min_pos',
                style    : "text-align: center;",
                width    : '35%'
            }]
        },{
            flex        : 1,
            xtype       : 'contentWrongTabs',
            scroll      : 'horizontal'
        }]
    }
});

[hallikpapa]

Any idea? This has me stumped.