HTML 表单到 ExtJS 表单

Question

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

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

经过一些研究后，我认为表格布局可能是定位字段的最佳选择。但我一直面临以下几个问题：

1. 如果我将 rowspan 或 colspan 设置为 2 或更大，那么字段的大小也不会增加以占用可用空间，并且仍然局限于单列。
2. 如果我调整窗口大小，则表格不会调整大小（不过，表单会调整窗口大小，因为顶部的 tbar 会扩展以占据完整空间）。

我已将布局用作窗口的“适合”，并将布局用作表单的“表格”。

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

有人可以解释一下吗？以下是我正在使用的基本代码片段：

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();

Answer 1

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

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

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);
    }
});

使用扩展表格布局我得到了想要的外观

Answer 2

一种替代方法是将 HTML 表单数据序列化为 JSON 并将其加载到 EXT 存储中。一旦进入商店，EXT 就会很乐意用它做任何你想做的事。