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

Question

我想按列和行对文本字段进行分组，我尝试使用 布局类型 'table' 但我无法对文本字段进行分组，我需要如下所示，请帮助我，我是 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 of the main form to hbox (horizontal box) than add 3 containers (or you could use fieldset, fieldcontainers) and in them set the layout to default or vbox (vertical). You can also play with the flex 配置以正确定位您的字段。

您可以随时添加更多容器并使用它们的布局。

您也可以尝试使用 table 布局 http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#layout-table

我个人使用 Sencha Architect，所以使用 hbox 和 vbox 布局创建这样的表单对我来说要快得多。

看看这个 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/200h

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 如何按行和列对文本字段进行分组？

Ext Js how to Group textfields by rows & columns?

extjs

sencha-touch