Ext JS Table Layout как заставить только последний элемент справа

Question

У меня есть страница с 3 элементами, созданными на странице, и 4-й элемент (D), загружаемый из другого файла сценария с использованием #parse. То, что я хочу сделать, это заставить макет таблицы выровнять их так:

 ____ ___
| A  |   |
|____|   |
| B  | D |
|____|   |
| C  |   |
|____|___|

Возможно ли это? Если да, то как?

Я пытался использовать colspan и rowspan безрезультатно.

Answer 1

Вы можете сделать это, используя макет, в частности, используя flex.

Пример кода:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'panel',
            title: 'Flexbox Layout Example',
            items: [{
                xtype: 'panel',
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'stretch'
                },
                height: '100%',
                border: 1,
                items: [{
                    xtype: 'panel',
                    flex: 1,
                    layout: {
                        type: 'vbox',
                        pack: 'start',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'panel',
                        flex: 1,
                        html: 'Panel 1',
                        border: 1,
                    }, {
                        xtype: 'panel',
                        flex: 1,
                        html: 'Panel 2',
                        border: 1,
                    }, {
                        xtype: 'panel',
                        flex: 1,
                        html: 'panel 3',
                        border: 1,
                    }]
                }, {
                    html: 'panel D',
                    xtype: 'panel',
                    flex: 1,
                    border: 1,
                }]
            }]
        });
    }
});

Ссылка на рабочую скрипку: https://fiddle.sencha.com/#view/editor&fiddle/2nio

Answer 2

FIDDLE

items: [{
    html: 'Cell A content'
}, {
    html: 'Cell B content',
    rowspan: 3
}, {
    html: 'Cell C content'
}, {
    html: 'Cell D content'
}]