沉睡森林@漂在北京

本处文章除注明“转载”外均为原创,转载请注明出处。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  152 随笔 :: 4 文章 :: 114 评论 :: 0 Trackbacks

在利用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]});

 

});

 

 

posted on 2008-11-17 17:22 王总兵 阅读(125) 评论(0)  编辑  收藏 所属分类: Ext

只有注册用户登录后才能发表评论。


网站导航: