在作布局的时候,常常会出现这类情况,在HTML中可以利用表格来布局,那么Ext2呢?
我自己也琢磨了不少时间,今天终于有了收获:
![sss](http://p.blog.csdn.net/images/p_blog_csdn_net/winderain/test.bmp)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [{
layout:'column', //定义该元素为布局为列布局方式
border:false,
labelSeparator:':',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
items:[{
columnWidth:.5, //该列占用的宽度,标识为50%
layout: 'form',
border:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [{ //这里可以为多个Item,表现出来是该列的多行
cls : 'key',
xtype:'textfield',
fieldLabel: '用户名',
name: 'name',
anchor:'90%'
}]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
},{
columnWidth:.5,
layout: 'form',
border:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [{
cls : 'key',
xtype:'textfield',
inputType:'password',
fieldLabel: '口令',
name: 'passwd',
anchor:'90%'
}]
}]
}]
})
如果每个列元素中的Items都为一行,则可以通过控制每列显示的宽度来换行,没换所有的列元素的宽度和达到100%后即换行
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步