表单的水平布局

最新推荐文章于 2024-12-20 10:47:59 发布

转载最新推荐文章于 2024-12-20 10:47:59 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lz3018/p/4579808.html

表单的默认布局是使用自上而下的布局(即竖直布局)，即是将各个子组件按照配置的先后顺序从上向下摆放。可以在表单的items配置项中定义layout：‘hbox’，定义子组件的布局为水平方向，这就实现了子组件的水平排列。hbox表示水平布局，vbox表示竖直布局。代码如下：

Ext.get(document.body).update("<div />");
Ext.create('Ext.form.Panel', {
title: '表单列布局方式',
frame: true,
renderTo: Ext.getBody(),
//width: 700,
autoWidth:true,
autoHeight: true,

items: [
{
layout: 'hbox', items: [
{
columnWidth: 40,
layout: 'vbox',
defaultType: 'textfield',
items: [
{ fieldLabel: '输入框1' },
{ fieldLabel: '输入框2' },
{ fieldLabel: '输入框3' }
]
},
{
columnWidth: 40,
layout: 'vbox',
defaultType: 'textfield',
items: [
{ fieldLabel: '阿里巴巴' },
{ fieldLabel: '百度' },
{ fieldLabel: '腾讯' },
{ fieldLabel: '360' }

]
},
{
columnWidth: 40,
layout: 'vbox',
defaultType:'textfield',
items: [
{ fieldLabel: '创新工场' },
{ fieldLabel: '知乎' },
{ fieldLabel: '豌豆荚' }

]

}

]
}
]

});