HTML 表单到 ExtJS 表单

 2022-02-12 

HTML Form to ExtJS Form

我有一个 html 表单,其中的字段非常分散。该页面是使用 html 表 - rowspan 和 colspan 组合创建的。

我需要将此表单转换为 ExtJS 并在窗口中显示。

经过一些研究,我觉得表格布局可能是定位字段的最佳选择。但是我一直面临以下几个问题:

  • 如果我将 rowspan 或 colspan 设置为 2 或更多,那么字段的大小也不会增加以占用可用空间并保持在单列中。
  • 如果我调整窗口大小,则表格不会调整大小(不过,表格会随着顶部的 tbar 展开以占据整个空间)。
  • 我将布局用作窗口的"适合",并将布局用作表单的"表格"。

    我也尝试过对表单使用"锚"布局,然后使用带有表格布局的字段集,但定位不起作用。

    有人可以说明一下吗。以下是我正在使用的基本代码片段:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    var form    =   Ext.create('Ext.form.Panel', {
                                        url:'voyage_berth_monitoring.php',
                                        fieldDefaults: {
                                            labelAlign: 'right'
                                        },
                                        layout:{
                                            type:'table',
                                            columns:3
                                        },
                                        defaults:{
                                            anchor:'100%'
                                        },
                                        tbar:[
                                            {
                                                xtype:'button',
                                                text:'Clear'
                                            },
                                            {
                                                xtype:'button',
                                                text:'Delete'
                                            },
                                            {
                                                xtype:'tbfill'
                                            },
                                            {
                                                xtype:'button',
                                                text:'Save'
                                            },
                                            {
                                                xtype:'button',
                                                text:'Exit'
                                            }
                                        ],
                                        items: [


                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield',
                                                            colspan:2

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    }


                                        ]
                                    });



    var win =   Ext.create('Ext.window.Window', {
                                title: 'Window',
                                closable: true,
                                closeAction:'hide',
                                minimizable:true,
                                maximizable:true,
                                height:350,
                                width:750,
                                layout:'fit',
                                autoScroll:true,
                                items: form
                            });

    win.show();


    基本上我的布局表也有同样的问题,找不到任何方法将我的显示字段跨越到 td 的长度,并且 2 列字段也有同样的问题。

    我更喜欢的解决方案是扩展表格布局并赋予它灵活性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    Ext.define('Extended.TableLayout', {
        alias:'layout.extendedTable',
        extend: 'Ext.layout.container.Table',
        type: 'extendedTable',
        columns: 2,
        rightMargin: 20,
        tableAttrs:{
            width: '100%'
        },
        tdAttrs:{
            width:'50%'
        },
        itemCls:'x-table-cell',
        renderItems: function(items) {

            var totalWidth = this.getLayoutTargetSize().width,
                len = items.length,
                i, item, colNr;

            for (i = 0; i < len; i++) {
                item = items[i];

                    colNr = this.columns;
                if ((colNr > 1) && Ext.isNumber(item.colspan)) {
                    colNr = colNr - item.colspan + 1;
                }
                item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
            }
            this.callParent(arguments);
        }
    });

    使用 extendedTable 布局,我得到了想要的外观


    另一种方法是将您的 HTML 表单数据序列化为 JSON 并将其加载到 EXT 存储中。一旦它在商店里,EXT 会很乐意用它做任何你想做的事情。