1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    Answers
    6
    hallikpapa is on a distinguished road

      0  

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

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


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

    Renders Correctly
    Code:
    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
    Code:
    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:

    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    Answers
    6
    hallikpapa is on a distinguished road

      0  

    Default


    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

    Code:
    /**
         * 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:

    Code:
    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'
            }]
        }
    });

  4. #4
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    Answers
    6
    hallikpapa is on a distinguished road

      0  

    Default


    Any idea? This has me stumped.

Thread Participants: 1