Grey Boxes and Scrollbars in the tabs

When I put certain words in the tabs then either the tab is displayed with a grey box or a scrollbar were the title is supposed to be (see below)

Attachment 40461

Tricks I've found:

• changing the word to either be shorter or longer makes the scrollbars go away
• changing the word to any other word (can even be the same length in some cases) will make the grey box go away

Relevant code: (the code to render the first two tabs)

Code:

---

xtype: 'tabpanel',
border: 0,
activeTab: 0,
items: [
{
      xtype: 'panel',
      border: 0,
      activeItem: 0,
      layout: {
              type: 'column'
      },
      title: 'General',
      items: [
          { .... }
      ]
},
{
      xtype: 'panel',
      border: 0,
      activeItem: 0,
      layout: {
          type: 'column'
      },
      title: 'Employee',
      items: [
          { ... }
      ]
}
]

---

Please help! I'm working with a deadline and I can't figure it out!

What are the words that cause the problem? I could not reproduce the issue with what you supplied. The following example works fine with Ext 4.1.1 & Chrome.

Code:

---

Ext.onReady(function(){
    Ext.create('Ext.tab.Panel',{
        renderTo: Ext.getBody(),
        width: 300,
        height: 200,
        border: 1,
        activeTab: 0,
        items: [{
              xtype: 'panel',
              border: 0,
              activeItem: 0,
              layout: {
                type: 'column'
              },
              title: 'General',
//            items: [
//                { .... }
//            ]
        },{
              xtype: 'panel',
              border: 0,
              activeItem: 0,
              layout: {
                  type: 'column'
              },
              title: 'Employee',
//            items: [
//                { ... }
//            ]
        }]
    });
});

---

The words are "General", "Employee" and "Risk Employee". The words that contain "Employee" are causing the scrollbar errors and the "General" causes the greybox error.
even when I comment out all the items, I still receive the same error.
More specs:

• OS: Mac OS X v. 10.6.8
• Browser: Chrome v. 23.0.1271.95

Do you encounter the issue with the simple example I posted in my previous post (#2)?

Yes. Commenting out the items doesn't seem to do the trick... and what I have instead of "onReady" is:

Code:

---

    initComponent: function() {
        var me = this;
        me.initialConfig = Ext.apply({
              trackResetOnLoad: true
        }, me.initialConfig);
        Ext.applyIf(me, {
              ... // render the panels here
        });
        me.callParent(arguments);
    }

---

Any updates on this ? I've had to deal with the same issue (greyed out tab titles for the longer names), this started happening I believe when my Chrome on the Mac Lion 10.7.5 auto-updated to ver. 22.x on or around Sep 25. Had to somehow switch back to Chrome ver. 21.0.1180.89 (and prevent auto-update) - the last good version where things continue to work.