ExtJs——FormPanel（布局）！！！

最新推荐文章于 2024-03-26 17:18:18 发布

原创最新推荐文章于 2024-03-26 17:18:18 发布 · 9.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #layout #function #音乐

ExtJs 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用Ext框架实现的灵活表单布局方案。通过column和form两种布局方式结合，实现了表单项的横向与纵向排列，并调整了各字段的宽度比例，以适应不同屏幕尺寸的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FormPanel就两种布局方式：

form——从上往下

column——从左往右

注意落实到任何一个表单最后总是form布局。

Ext.onReady(function(){ //行1 var row1 = { layout:'column', //从左往右布局 items:[{ columnWidth:.3, //该列有整行中所占百分比 layout:'form', //从上往下布局 items:[{ xtype:'textfield', fieldLabel:'姓', width:120 }] },{ columnWidth:.3, layout:'form', items:[{ xtype:'textfield', fieldLabel:'名', width:120 }] },{ columnWidth:.3, layout:'form', items:[{ xtype:'textfield', fieldLabel:'英文名', width:120 }] }] }; //行2 var row2 = { layout:'column', items:[{ columnWidth:.5, layout:'form', items:[{ xtype:'textfield', fieldLabel:'座右铭1', width:220 }] },{ columnWidth:.5, layout:'form', items:[{ xtype:'textfield', fieldLabel:'座右铭2', width:220 }] }] }; //行3 var row3 = { layout:'form', items:[{ xtype:'textfield', fieldLabel:'奖励', width:500 },{ xtype:'textfield', fieldLabel:'处罚', width:500 }] }; //行4 var row4 = { layout:'column', items:[{ columnWidth:.2, layout:'form', items:[{ xtype:'textfield', fieldLabel:'最爱电影', width:50 }] },{ columnWidth:.2, layout:'form', items:[{ xtype:'textfield', fieldLabel:'最爱音乐', width:50 }] },{ columnWidth:.2, layout:'form', items:[{ xtype:'textfield', fieldLabel:'最爱明星', width:50 }] },{ columnWidth:.2, layout:'form', items:[{ xtype:'textfield', fieldLabel:'最爱运动', width:50 }] }] }; //行5 var row5 = { layout:'form', items:[{ xtype:'htmleditor', fieldLabel:'获奖文章', height:150 }] }; //form var form = new Ext.form.FormPanel({ renderTo:Ext.getBody(), title:'灵活的表单布局', width:650, autoHeight:true, frame:true, layout:'form', labelWidth:65, labelAlign:'right', style:'padding:10px', items:[row1,row2,row3,row4,row5], buttonAlign:'center', buttons:[{ text:'提交' },{ text:'重置' }] }); });