Question

我想按列和分组对文本字段进行分组行，我尝试了布局类型'表'，但我无法对文本字段进行分组，我需要如下所示，请帮助我，我完全是新的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

Answer 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'
                }
            ]
        }
    ]

});

Ext Js如何按行和组分组文本字段列？

1 个答案: