ExtJS: динамически настраиваемый макет после добавления / удаления некоторых полей формы

Question

У меня есть макет формы с некоторыми элементами TextField и одним элементом HtmlEditor. Некоторые элементы TextField являются «скрываемыми», то есть могут быть скрыты или показаны. После скрытия / показа элементов HtmlEditor разбивает макет - появляется пустое пространство или элемент не заканчивается на границе окна.

Можно ли сказать экземпляру HtmlEditor использовать все оставшееся доступное пространство? Даже в случае, когда некоторые элементы скрыты / показаны.

Я пытался использовать свойство anchor, но оно работает хорошо, пока какой-то элемент не будет удален из макета.

Обновлено Вот пример кода:

var htmlEditor = new Ext.form.HtmlEditor({
    anchor: '100% -54',
    hideLabel: true
});

var fp = new Ext.form.FormPanel({
    items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, 
            {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'},
        htmlEditor]
});

var w = new Ext.Window({layout: 'fit',
    height: 400, width: 600,
    tbar: [{text: 'click',
        handler: function() {
            // hide element
            Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false);
            w.doLayout();
        }
        }],
    items: fp   
});

w.show();

Выполнить, нажать кнопку на панели инструментов «щелкнуть», одно поле должно исчезнуть, затем посмотреть на пустое место под htmleditor.

Answer 1

При добавлении / удалении компонентов из контейнера необходимо вызвать Container.doLayout (), чтобы он пересчитал размеры.

[EDIT]: обратите внимание, что это относится только к Ext <= 3.x. В 4.x система верстки управляет этим для вас. Хотя метод все еще там, вы никогда не должны использовать его. </p>

Answer 2

[Новый ответ, чтобы я мог отформатировать код]

Один из подходов состоит в том, чтобы сделать внешний макет более разработанным, чтобы делать то, что вы хотите, например, BorderLayout с севером (ваши верхние поля) и центром (редактор HTML). Таким образом, html-редактор может быть просто привязан к 100% высоты его контейнера (центральная область). В этом случае, поскольку компоновка будет должным образом управляться, мой предыдущий совет по doLayout () должен сработать.

Если вы действительно хотите управлять полями за пределами макета, которые помогут вам в этом, то вам придется управлять высотами вручную. Изменение свойства привязки - один из способов. Способ, которым я делал это в прошлом (и более предпочтительный), заключается в том, чтобы прослушать соответствующее событие и установить размер компонентов по мере необходимости. Например, вы можете добавить слушателя изменения размера в окно:

    listeners: {
        'resize': function(){
            Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110);
        }
    }

Используя ваш тестовый код, вы достаточно близки к этому. Тем не менее, в реальном коде вы бы хотели получить высоту от существующих видимых компонентов и вычесть это число, а не жестко закодировать его, но вы поняли идею. Один из способов упростить этот подход - добавить верхние поля в отдельную панель с именем autoHeight: true, затем, после отображения или скрытия полей, просто измерьте высоту этой панели и вычтите ее из высоты окна (плюс поля / отступы). получить высоту вашего html-редактора (это то, что я делал в прошлом, когда не мог полагаться на макет для управления им).

Как вы можете видеть, есть много способов снять шкуру с этой кошки, поэтому вы можете выбрать подход, который подходит вам больше всего.

Answer 3

попробуйте поместить это Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); в событие afterlayout окна и добавить туда условие ...

как это:

'afterlayout': function() {
   <condition> {
       Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false);
   }
}

надеюсь, это поможет!

Answer 4

используйте autoHeight:true и размер окна изменяется в соответствии с контейнером.

Answer 5

вы должны использовать свойство видимости элемента. Хитрость в том, что даже невидимые элементы занимают место на странице.

object.style.visibility="hidden"