Блог

У меня есть панель с 3 элементами в ней. Панель, затем горизонтальный разделитель, затем панель. Этот макет работает нормально, и пользователь может легко перетаскивать разделитель вверх и вниз, чтобы изменять размеры смежных панелей.

Но как мне установить положение разделителя программно? В идеале я хотел бы анимировать разделитель в его новой позиции.

Разделитель имеет метод setPosition , который также принимает аргумент animate. Но этот метод просто перемещает разделитель без изменения высоты любой панели. Таким образом, разделитель теперь плавает над верхней частью одной из панелей. В afteranimate прослушивателе я перепробовал все виды doLayout, UpdateLayout, panel.setHeight и т.д… но, похоже, ничто не влияет на размеры панели. Согласно консоли, код запущен, он просто ничего не делает.

Итак, каков метод изменения положения горизонтального положения между двумя панелями?

Для этого используется Ext 4.1.1a.

 splitter.setPosition(0,30,{
    listeners:{
        beforeanimate: function(){
            console.log('animate');
        },
        afteranimate: function(){
            console.log('finished');
            bottomPanel.setHeight(500);  //Does nothing
            splitter.updateLayout(); //Does nothing
            rightColumn.doLayout();  // Puts splitter bar back to the original position
        }
    }
});
  

Я решил очень похожую проблему с ExtJS 4.1.3. У меня есть две панели, разделенные вертикальным разделителем, и я хотел, чтобы положение разделителя сохранялось при обновлении страницы.

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

Я сохраняю ширину боковой панели с помощью менеджера состояний ExtJS. Если новый параметр width не определен, то это ситуация перезагрузки страницы, и я получаю последнюю сохраненную ширину боковой панели из диспетчера состояний. Я устанавливаю ширину боковой панели на сохраненное значение, затем устанавливаю положение разделителя на 20 пикселей больше ширины (для учета, я полагаю, полосы прокрутки.)

Внутри боковой панели:

 resize: function (sidebar, newWidth, newHeight, oldWidth, oldHeight) {
    var sidebarWidth = newWidth;
    if (oldWidth === undefined) {
        // page reload. restore width from state manager
        savedWidth = Ext.state.Manager.get('sidebar_width');
        sidebarWidth = savedWidth === undefined ? sidebarWidth : savedWidth;
    }
    sidebar.splitter.setPosition(sidebarWidth   20);
    sidebar.setWidth(sidebarWidth);
    Ext.state.Manager.set('sidebar_width', sidebarWidth);
}
  

Я избегал установки прослушивателя внутри панели, потому что я не знал, как получить дескриптор объекта splitter. Прорыв произошел, когда я обнаружил, что параметр контекста, отправленный в событие изменения размера (названный sidebar в предоставленном примере кода), содержит ссылку на объект splitter.

Это решение сработало для меня, и, надеюсь, оно будет полезно другим с этим вопросом.