在利用viewport进行布局处理的时候出现了问题，情况是页面显示不合理。具体的代码如下：
var _bodyWidth = Ext.getBody().getWidth()-12;
function testForm1(){
}
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
var panel_cnorth
= new
Ext.Panel({name:'panel_cnorth',frame:false, region:'north',layout:'fit',id:"panel_cnorth",split:true});
var testForm_north
= new
Ext.FormPanel({name:'testForm_north',id:'testForm_north',layout:'table',width:_bodyWidth+12,layoutConfig: {columns:4},defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_bodyWidth/2,height:30}, method:'post',url:'txn990051.do',title:'north表单',frame:true});
testForm_north.addButton({text:'test form',handler:testForm1});
testForm_north.addButton({text:'重置',handler:function(){resetForm('testForm_north')}});
testForm_north.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'用户名',allowBlank:false,disabled:true,blankText:'用户名不能为空！',emptyText:'enter your username',id:'username1',name:'username1',anchor:"100%"}});
testForm_north.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'电子邮箱',readOnly:true,value:'bingxue2332@163.com',id:'msn2',name:'msn2',anchor:"100%"}});
testForm_north.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'QQ号码',maxLength:9.0,maxLengthText:'QQ号码长度不能超过9位！',minLength:5.0,minLengthText:'QQ号码长度不能少于5位！',id:'qq3',name:'qq3',anchor:"100%"}});
testForm_north.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'MSN号码',value:'msn',id:'email4',name:'email4',vtype:'email',anchor:"100%"}});
panel_cnorth.add(testForm_north);
var panel_center
= new
Ext.Panel({name:'panel_center',frame:false,height:200,region:'center',id:"panel_center"});
var testForm = new Ext.FormPanel({name:'testForm',id:'testForm',layout:'table',style:'height:100%',width:_bodyWidth+12,layoutConfig: {columns:4},defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_bodyWidth/2,height:30}, method:'post',url:'txn990051.do',title:'center',frame:true});
testForm.addButton({text:'test form',handler:testForm1});
testForm.addButton({text:'重置',handler:function(){resetForm('testForm')}});
testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'用户名',allowBlank:false,disabled:true,blankText:'用户名不能为空！',emptyText:'enter your username',id:'username',name:'username',anchor:"100%"}});
testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'电子邮箱',readOnly:true,value:'bingxue2332@163.com',id:'msn',name:'msn',anchor:"100%"}});
testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'QQ号码',maxLength:9.0,maxLengthText:'QQ号码长度不能超过9位！',minLength:5.0,minLengthText:'QQ号码长度不能少于5位！',id:'qq',name:'qq',anchor:"100%"}});
testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'MSN号码',value:'msn',id:'email',name:'email',vtype:'email',anchor:"100%"}});
panel_center.add(testForm);
var viewport1
= new
Ext.Viewport({name:'viewport1',id:'viewport1',layout:'border',items:[panel_center,panel_cnorth]});
});