ExtJS 4.1.1 add tab in FF18

[ragecf]

Hey all

There is a strange appearance when I add/close tab frequently.

Ext.define('MyTree', {
    extend: 'Ext.tree.Panel',
    
    initComponent: function() {
        this.store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [
                    { id: 'node1', text: 'Node1', leaf: true },
                    { id: 'node2', text: 'Node2', leaf: true },
                    { id: 'node3', text: 'Node3', leaf: true },
                    { id: 'node4', text: 'Node4', leaf: true },
                    { id: 'node5', text: 'Node5', leaf: true },
                    { id: 'node6', text: 'Node6', leaf: true },
                    { id: 'node7', text: 'Node7', leaf: true }
                ]
            }
        });
        
        Ext.apply(this, {
            id: 'my-tree',
            title: 'My Tree',
            useArrows: true,
            autoScroll: true,
            listeners: {itemclick: this.onClick}
        });

        this.callParent(arguments); 
    },
    
    onClick: function(view, rec) {
        if (!rec.data.leaf) {
            return;
        };
        
        var tabId = rec.data.id + '-tab';
        var centerTab = Ext.getCmp('center-tab');
        
        if (centerTab.child('#' + tabId)) {
            centerTab.setActiveTab(tabId);
        } else {
            var grid = Ext.create('MyGrid', {
                gridId: tabId,
                gridTitle: rec.data.text
            });
            centerTab.add(grid);
            centerTab.setActiveTab(tabId);
        };
    }
});

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    
    initComponent: function() {
        Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'd1',  type: 'auto'},
                {name: 'd2',  type: 'auto'},
                {name: 'd3',  type: 'auto'},
                {name: 'd4',  type: 'auto'},
                {name: 'd5',  type: 'auto'},
                {name: 'd6',  type: 'auto'},
                {name: 'd7',  type: 'auto'},
                {name: 'd8',  type: 'auto'},
                {name: 'd9',  type: 'auto'},
                {name: 'd10', type: 'auto'}
            ]
        });
       
        this.store = Ext.create('Ext.data.Store', {
            model: 'MyModel',
            autoLoad: true,
            pageSize: 1000,
            proxy: {
                type: 'ajax',
                url: 'test.json',
                reader: {
                    type: 'json',
                    root: 'root'
                },
                sortParam: null,
                pageParam: null,
                startParam: null,
                limitParam: null     
            }
        });
        
        this.columns = [
            {xtype: 'rownumberer',             width: 28}, 
            {dataIndex: 'd1',     text: 'c1',  width: 60},
            {dataIndex: 'd2',     text: 'c2',  width: 60},        
            {dataIndex: 'd3',     text: 'c3',  width: 60},
            {dataIndex: 'd4',     text: 'c4',  width: 120},
            {dataIndex: 'd5',     text: 'c5',  width: 80},
            {dataIndex: 'd6',     text: 'c6',  width: 100},
            {dataIndex: 'd7',     text: 'c7',  width: 180},
            {dataIndex: 'd8',     text: 'c8',  width: 120},
            {dataIndex: 'd9',     text: 'c9',  width: 120},
            {dataIndex: 'd10',    text: 'c10', width: 220}
        ];
        
        Ext.apply(this, {
            id: this.gridId,
            title: this.gridTitle,
            closable: true
        });
        
        this.callParent(arguments);
    }
});

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            xtype: 'box',
            height: 30,
            contentEl: 'header'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150,
            items: Ext.create('MyTree')
        }, {

            region: 'center',
            id: 'center-tab',
            xtype: 'tabpanel',
            activeTab: 0,
            minTabWidth: 110,
            items: {
                title: 'Default Tab',
                html: 'The first tab'
            }
        }]
    });
});

test.json

{success:true,total:10,root:[
    {id:1,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:2,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:3,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:4,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:5,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:6,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:7,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:8,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:9,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'},
    {id:10,d1:'a',d2:'a',d3:'a',d4:'a',d5:'a',d6:'a',d7:'a',d8:'a',d9:'a',d10:'a'}
]}

When click the tree node quickly and frequently, or close some tabs quickly, the tab will display unordered.

This only appears in FF18. In chrome is fine.
In IE8 was fine but did not display load mask.

Actually in my project, the mostly appearance was load mask did not disappear when added a new tab.

I will upload image later, thanks.

[ragecf]

Normal
normal.jpg

After clicking quickly and closed some tabs, tabs title spacing was increased , and some grid column header were disappeared, even some grid was disappeared.

unorder.jpg

[ragecf]

I hope someone can help, thanks.

[ragecf]

Oooooooo

Everything is OK now for both of this test code and my project, after FF is upgraded to 1.18.01 today!!!!!!

Now only one problem left, load mask did not display in IE8 when grid was added as tab.