Ext form表单两列及多列布局

最新推荐文章于 2021-12-03 16:47:12 发布

原创最新推荐文章于 2021-12-03 16:47:12 发布 · 5.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#ext #表单 #布局

extjs 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用ExtJS框架创建包含文本输入框和日期选择器的用户表单。通过两个fieldcontainer组件，实现了表单元素的横向和纵向布局。

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

Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'User Form',
xtype: 'form',
  layout: 'anchor',
height: 300,
width: 800,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
defaults: {
labelAlign: 'left',
padding: '10 0 0 0'
},
items: [
{
  xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName'
},
{
  xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
},
{
// 文本域容器 fieldcontainer
xtype: 'fieldcontainer',
// 在容器中水平排列 hbox 垂直排列 vbox
layout: 'vbox',
defaults: {
xtype: 'textfield',
// name在文本框的位置 top left right
labelAlign: 'left',
// 距离上一个fieldcontainer容器的距离，分别代表上、右、下、左
padding: '5 0 0 0'
},
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
}]
});

});

上面的代码是横排3列和竖排3行的例子，fieldcontainer是文本域的容器，实现页面如下：

2列的话就在fieldcontainer写2个label。