Ext form表单两列及多列布局 extjs

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'
}
]
}]
});
【Ext form表单两列及多列布局】});
上面的代码是横排3列和竖排3行的例子，fieldcontainer是文本域的容器，实现页面如下：

文章图片

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

Ext form表单两列及多列布局

推荐阅读

茶叶泡几次？终于知道了

手机百度贴吧如何设置签到提醒

cheat什么意思 cheat翻译

什么材质的水龙头好用什么材质的水龙头好

521数字代表什么意思与520相似代表我爱你

30pro|降至2198，骁龙888+55W+6400万超清影像，中兴厚道了

杏鲍菇营养分析图杏鲍菇营养分析

咪咕视频世界杯竞猜活动怎么玩咪咕视频世界杯竞猜活动玩法

端午节送给女朋友的暖心情话

redis集群哨兵模式原理 redis哨兵集群方式

华为|首批北斗认证手机出炉，有小米、苹果、OV，却没有华为？

抱团取暖下一句是什么抱团取暖下一句连什么句子

比赛场上位于篮球场底线的裁判被称为简述篮球裁判员的职责和权利

2023东莞高中学考成绩复查流程东莞高中期末考试成绩查询

广结善缘

凹痕修复后能看出来吗凹陷修复后为什么看着还是有坑

家里装修瓷砖怎么选?有什么品牌和价位家里装修瓷砖怎么选

呼吸灯有时候亮有时候不亮 ⅤⅰⅤOY7s呼吸灯不亮怎么整

arm 指令格式分析

怎样走路水不会溅到裤子上走路水不会溅到裤子上的方法