我想按列和分组对文本字段进行分组行,我尝试了布局类型'表',但我无法对文本字段进行分组,我需要如下所示,请帮助我,我完全是新的Ext jS,提前感谢。
column 1 column 2 column 3
Row 1 Name: textfield RollNo: textfield Language: textfield
Row 2 Age: textfield Ph: textfield Class: textfield
Row 3 ID: textfield Email: textfield Class: textfield
答案 0 :(得分:1)
有多种方法可以实现此目的,但您可以做的是将主窗体的layout设置为hbox(水平框)而不是添加3个容器(或者您可以使用{{ 3}},fieldset)并在其中将布局设置为默认值或fieldcontainers(垂直)。您还可以使用vbox配置来正确定位字段。
您可以随时添加更多容器并使用其布局。
您也可以尝试使用表格布局flex
我个人使用Sencha Architect,所以使用hbox和vbox布局创建这样的表单要快得多。
看看这个小提琴:http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#layout-table
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias: 'widget.myform',
requires: [
'Ext.form.FieldContainer',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'My Form',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
}
]
});