extjs viewport求教

Question

Ext.onReady(function(){
var south = new Ext.Panel({
title:"南边",
region:"south",
height:80

});
var north= new Ext.Panel({
title:"北边",
region:"north",
height:80});
var center= new Ext.Panel({
title:"中间",
region:"center",
layout:'fit',
html:'<div id='ceshi'></div>']
});
var west= new Ext.Panel({
title:"西边",
region:"west",
height:80});
var viewport = new Ext.Viewport({
layout:'border',
items:[south,north,center,west]
});
var kkk= new Ext.Panel({
title:"西边",
renderTo:'ceshi'
height:80});
   kkk.render(); })  
为什么kkk这个pannel显示不出来？？？？？？

Answer 1

Ext.onReady(function(){
var south = new Ext.Panel({
    title:"南边",
    region:"south",
    height:80
     
    });
var north= new Ext.Panel({
    title:"北边",
    region:"north",
    height:80});
var center= new Ext.Panel({
    title:"中间",
    region:"center",
    layout:'fit',
    html:'<div id='ceshi'></div>']
    });
var west= new Ext.Panel({
    title:"西边",
    region:"west",
    height:80});
 var kkk= new Ext.Panel({
    title:"西边",
    renderTo:'ceshi'
    height:80});
   kkk.render();
 
    })
var viewport = new Ext.Viewport({
    layout:'border',
    items:[south,north,center,west,kkk]
    });
   

Answer 2

你只是定义的kkk面板 但是没有告诉extjs在Viewport内哪显示，
另：Viewport是占据整个页面的一种布局，kkk必须放在其内显示才行；

Answer 3

布局问题,border layout的region:'center'的宽度是由你的region:'east', region:'west'的宽度决定的.如果你不定义east或者west的宽度,中间部分不会出来(IE9和FF测试是这样的，其他浏览器暂时没弄过，你有兴趣深入就去看看'border' layout源码吧)。稍微改了下你的代码，我电脑的效果图也已附上，你参考下。Ext.onReady(function(){
var south = new Ext.Panel({     
title:"south",     
region:"south",     
eight:80            
}); 
var north= new Ext.Panel({     
title:"north",     
region:"north",     
height:80
}); 
var center= new Ext.Panel({     
title:"center",     
region:"center",     
layout:'fit',     
html:'<div id="ceshi"></div>'     
}); 
var west= new Ext.Panel({     
title:"west",     
region:"west",
width:80,//更改处   
height:80
}); 
new Ext.Viewport({
layout:'border',
items:[center,north,south,west]

}) 
var kkk= new Ext.Panel({     
title:"west corner",     
renderTo:'ceshi',  
height:80
});    })