ExtJS4 — Расширение Ext.tab.Panel для предотвращения установки значений высоты

Я переношу приложение с ExtJS 3.x на v4, и теперь у меня возникли проблемы с TabPanel, когда свойство «autoHeight» было удалено. Я знаю, что если вы явно не определяете высоту панели, предполагается, что это «автоматическая высота», но это верно только до некоторой степени.

В ExtJS4 панель вкладок без установленной высоты по-прежнему будет иметь встроенные значения высоты css, установленные на панели вкладок, содержащих элементы div, и эти высоты рассчитываются на основе начальной высоты содержимого каждого элемента вкладки. И да, если вы обновите высоту любых дочерних компонентов элементов вкладки, высота вкладки будет пересчитана, чтобы соответствовать ей, или если вкладка содержит необработанный HTML, а метод вкладки update() используется для изменения этого содержимого, его высота снова будет отрегулирована по размеру.

В любом случае проблема в моем приложении заключается в том, что я обновляю необработанный HTML-контент этих вкладок, используя методы, отличные от тех, что используются в среде ExtJS, такие как jQuery.html(). Поскольку панель вкладок не уведомляется об этом изменении содержимого, она не пересчитывает значение высоты вкладки.

Чтобы обойти это, все, что я хочу сделать, это убедиться, что элементы панели вкладок, содержащие элементы, всегда имеют значение height:auto при рендеринге, повторном рендеринге или чем-либо еще. Я предполагаю, что для этого мне нужно будет расширить TabPanel, но я не знаю, с чего начать, какие методы переопределять и т. Д. Есть предположения?


tabs height extjs tabpanel extjs4
person Bill Dami    schedule 28.11.2011    source источник
comment
ты пробовал height: 'auto'?   -  person user123444555621    schedule 29.11.2011
comment
Ага, пробовал. Когда высота была установлена ​​​​на «авто» в конфигурации панели вкладок, панель отображалась с высотой 18 пикселей.   -  person Bill Dami    schedule 29.11.2011

Ответы (2)


arrow_upward
2
arrow_downward

Это то, что я в итоге сделал. Это определенно не идеально, довольно хакерски, но, похоже, работает нормально. Может быть, кто-то лучше увидит, что я пытаюсь сделать сейчас, и сможет придумать лучшую реализацию :-)

Ext.define('Ext.tab.AutoHeightPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.autoheighttabs',

    constructor: function(cnfg){
        this.callParent(arguments);
        this.initConfig(cnfg);
        this.on('afterlayout', this.forceAutoHeight, this);
        this.on('afterrender', this.forceAutoHeight, this);
        this.on('resize', this.forceAutoHeight, this);
    },

    forceAutoHeight: function(){
        this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
        this.items.each(function(item, idx, len) {
            if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
        });
    }
});

Вы можете добавить значение 'margin-bottom' в конфигурацию style панели вкладок, чтобы контент не упирался в нижнюю часть панели.

person Bill Dami    schedule 02.12.2011

arrow_upward
1
arrow_downward

Примечательная часть заключается в том, что ExtJS узнает об обновлении компонента. Вам нужно в основном пересчитать компоновку компонентов. Вы можете использовать метод doLayout( ), доступный с классом Panel. Вызывая это, вы принудительно запрашиваете пересчет и обновление макета. Думаю, это должно тебе помочь.

person Abdel Raoof Olakara    schedule 29.11.2011
comment
Да, это то, чего я как бы надеялся избежать, потому что, в конце концов, я думаю, что для этого потребуется много добавленного кода, пытающегося найти каждый любой экземпляр, где высота содержимого может измениться, и убедиться, что он вызывает doLayout() после, и, вероятно, пропустить некоторые неясные случаи. Я бы подумал, что простое изменение собственных внутренних функций макета панели вкладок, чтобы они не заботились о высоте и просто позволяли панели расширяться, чтобы соответствовать ее содержимому в соответствии с естественным потоком документов, было бы более элегантным и охватило бы все мои основы. - person Bill Dami; 29.11.2011