ExtJS组件Container

初用ExtJS, 感觉里面的组件有一部分好用,但有个别的组件非常之难用, 又不容易控制.
这不, 本人最近使用到了Container组件, 想将两个Container分成左右显示, 但被其宽度设置打败了.
竟然不能五五分设宽度(如: 两个不能50%), 因为左边的内容少, 而右边的内容多. 设置50%后右边的内容显示在了左边的下面.
只能设置左边为30%了, 但是在1024*768的分辨率下, 右边的一部分内容被切掉了. 而且不会出现scroll, 请问我怎么做可以显示出scroll或者其它的解决方式呢?

var leftconfig = {
id:"leftPanel",
width:"30%",
autoScroll: true,
height:"100%",
//monitorResize: true,
//region:'west',
bodyStyle:"padding:0px"
};
var rightconfig = {
id:"rightPanel",
width:"67%",
autoScroll: true,
height:"100%",
//monitorResize: true,
//region:'easts',
bodyStyle:"padding:0px"
};

leftPanel = new Ext.Container(leftconfig);
rightPanel = new Ext.Container(rightconfig);



var mainConfig = {

id:"loginPanel",
//renderTo:Ext.get("mainform"),
applyTo:'mainform',
//monitorResize: true,
height :"100%",
width:"100%",
//frame:true,
layout:"column",
//border:false,
defaults:{border:false},

items:
[
leftPanel,
{
html : '  '
},
rightPanel
]
};

var mainPanel = new Ext.Container(mainConfig);