HTML表單到ExtJS表單

Question

我有一個HTML表單，其中的字段非常分散。 該頁面是使用html表-行跨和列跨組合創建的。

我需要將此表單轉換為ExtJS並將其顯示在窗口中。

經過一些研究，我覺得表格布局可能是放置字段的最佳選擇。 但是，我面臨的幾個問題如下：

1. 如果我將rowpan或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

一種替代方法是將HTML表單數據序列化為JSON並將其加載到EXT存儲中。 進入商店后，EXT會很樂意做任何您想做的事。

Answer 2

基本上我在布局表上有同樣的問題，找不到任何方法可以將我的顯示字段跨度到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);
    }
});

使用ExtendedTable布局，我得到了所需的外觀