Форма HTML в форму ExtJS

Question

У меня есть HTML-форма, в которой поля очень разбросаны. Страница была создана с использованием комбинаций html table - rowspan и colspan.

Мне нужно преобразовать эту форму в ExtJS и отобразить ее в окне.

После проведения некоторых исследований я считаю, что расположение таблиц может быть лучшим выбором для размещения полей. Но есть несколько проблем, с которыми я сталкивался:

1. Если я задаю rowspan или colspan как 2 или более, то поля также не увеличиваются в размерах, чтобы занимать доступное пространство, и остаются ограниченными одним столбцом.
2. Если я изменю размер окна, то размер таблицы не изменится (хотя форма будет выглядеть так, как тбар, представленный вверху, расширяется, чтобы занять все пространство).

Я использовал макет как «подходящий» для окна, а макет как «таблицу» для формы.

Я также пытался использовать макет «якорь» для формы и затем иметь набор полей с макетом таблицы, но позиционирование не сработало.

Может кто-нибудь, пожалуйста, пролить свет на это. Ниже приведен фрагмент кода, который я использую:

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

Используя макет extendedTable, я получаю желаемый вид

Answer 2

Один из вариантов - сериализовать данные HTML-формы в формате JSON и загрузить их в хранилище EXT. Как только он появится в магазине, EXT с радостью сделает с ним все, что вы захотите.