Ext 中panel 动态添加组件 不显示 求助~

Question

整个页面是一个viewport
viewport中的“center”域里放的是一个tabPanel
tab panel 中有3个panel ：tab1,tab2,tab3
tab3 中有3个items，其中有一个是gridpanel 
gridpanel 中有个button，现在就是想通过点击这个button ，给tab3 动态添加一个panel 然后
然后调用tab3.doLayout(),结果没有更新，但是这个tab3确实已经加进去了这个panel ，就是不显示，
谁知道原因伐~~~

Answer 1

var spotsgrid = Ext.create('Ext.grid.Panel', {
itemId:'spotsgrid',
height:400,
    title: 'title1',
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns:[ 
     Ext.create('Ext.grid.RowNumberer'),
     {header: '1111',  dataIndex: 'name'},
        {header: '222',  dataIndex: 'name'},
        {header: '333', dataIndex: 'email', flex:1}
    ],
    
    bbar:{items:[{text:'button1',handler: function(){
    
alert(viewport.items.getAt(1).items.getAt(2).title);viewport.items.getAt(1).items.getAt(2).items.add(createSpotStatistic());
alert(viewport.items.getAt(1).items.getAt(2).items.items[2].title);
//viewport.items.getAt(1).items.getAt(2).items.items[2].show();
//viewport.items.getAt(1).items.getAt(2).items.items[2].doLayout();
//tabs.doLayout();
viewport.items.getAt(1).items.getAt(2).doLayout();
alert(Ext.getCmp('tab3').doLayout().layout);
//alert(tab3.items.length);
//tabs.doLayout();
//viewport.doLayout().show();
//alert(tab3.doLayout().items.length);
//spotsgrid.doLayout();
//tabs.doLayout();
//tab3.doLayout();
//tabs.items.getAt(2).items.getAt(3).show();
//Ext.getCmp('viewport').items.getAt(1).items.getAt(2).doLayout();
//alert(tab3.items.length);
//alert(Ext.getCmp('viewport').items.getAt(1).getActiveTab().items.add(createSpotStatistic()));
}},{text:'button2'},{text:'button3'},{text:'button4'}]},
      dockedItems: [{
        xtype: 'pagingtoolbar',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});var tab1 = {
            title: 'tab1',
            bodyPadding: 10,
            items:[form1]
        };
var tab2 = {
            title: 'tab2',
            bodyPadding: 10,
            html : 'tab2'
        };
        
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////        
tab3 = Ext.create('Ext.panel.Panel',{
deferredRender:false,
id:'tab3',
layout: 'fit',
         //xtype:'Ext.Component',
            title: 'tab3',
           // bodyPadding: 10,
            items:[date,spotsgrid]
        });
        
tabs = Ext.create('Ext.tab.Panel', {
    width: 300,
    height: 200,
    activeTab: 0,
    region:'center',
    items: [tab1,tab2,tab3]
}); 
//tab3.items.add(createSpotStatistic());
//tabs.doLayout();
//alert(tab3.items.getAt(3));
//for(i in tabs.items){
//alert(tabs.items[i]);
//}
//tab3.add(date);
//Ext.getCmp('').add
//var test = tabs.items;
//alert(test.length);
//alert(test.prototype);
//tabs.add(tab3);
//alert(tabs.items[0].title);//test
//alert(tabs.items);
//alert(tabs.items.getAt(2).id);
//tabs.items[3] = tab3;
viewport = Ext.create('Ext.Viewport', {
id:'viewport',
            layout:'border',
            items:[
                left, tabs,{
                region:'north',
                margins:'5 5 5 0',
                cls:'ce',
                bodyStyle:'background:#f1f1f1',
                html:'<table width="100%"><tr><td align="center"><font class="title">111111</font></td></tr></table>'
            },{
                region:'south',
                margins:'5 5 5 0',
                cls:'ce',
                bodyStyle:'background:#f1f1f1',
                html:'<table width="100%"><tr><td align="center"><font class="title">1111</font></td></tr></table>'
            }],
    renderTo:  document.body

        });


}