关于extjs的，在Tabpanel的一个子页中进行border布局，但是完全没效果？

[正在努力的PP君]

var tabs = new Ext.TabPanel({
        renderTo:Ext.getBody(),
        width:'auto',
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[{
	            xtype:'panel',
	            title: '指标考核',
	            layout:'border',
	            width:100,
	            listeners:{
	            	activate:function(){alert('a')}
	            },
	            items:[{
	            	region:'center',
	            	html:'good'	            	
	            },{
	            	region:'west',
	            	html:'bad'
	            }]
	            
	            
            },{
           		 contentEl:'element2', title: '过程监测'
            },{
           		 contentEl:'element3', title: '指标仪表盘'
            },{
           		 contentEl:'element4', title: '能耗评估'
            },{
           		 contentEl:'element5', title: '更多'
            }
            
        ]
	});

点了按钮之后，动态生成一个tabPanel,然后在其第一子页内进行border布局，但是效果只是一个白板。
求大神help！以上是我的代码。