Ext.onReady(function(){
//定义左边面板
var panelLeft = new Ext.Panel({
columnWidth: .42,
title:"Eclipse",
height:400,
id:'panel01',
style:{margin:'0px 10px 0px 10px'},
collapsible:true,
tbar:[{text:'File'},{text:'Edit'},{text:'Source'},{text:'Refactor'}],
bbar:[{text:'Show View as a fast view'}],
buttons:[{text:"Submit"}, {text:"Reset"}],
html:"<h1><font color='blue'>Edocom company of NanJing</font></h1>"
});
//定义右边面板
var panelRight = new Ext.Panel({
columnWidth:.38,
id:'panel02',
height:300,
//collapseFirst:true,
//style:{margin:'0px 10px 0px 10px'},
//collapsible:true,
//disable:false,
//hidden:true,
//titleCollapse:true,
title:'用户注册',
//autoLoad:'load.html',
html:'<h1>userName</h1>'
//tbar:[{text:'Login'}],
//bbar:[{text:'Register Inf'}],
//buttons:[{text:'Submit'}, {text:'Reset'}]
});
//定义总面板在item中包含panelLeft、panelRight
var panel = new Ext.Panel({
renderTo: Ext.getBody(),
style:{margin:'10px 0px 0px 0px'},
//width:1024,
//height:768,
//layout:"column",
layout:"column",
border:false,
//floating:false,
//frame: false,
items:[panelLeft,panelRight]
});
});
在火狐浏览器中是没有问题地。但是也找不到很好的解决方法,只知道:两个panel都不加bar的时候,还是能很好的显示;并且两者的columnWidth都不能改为width。我预测是ExtJs的样式有问题,不过具体原因有待进一步调试,观察。