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

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

2 голосов
/ 29 ноября 2011

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 02 декабря 2011

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

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 Конфигурация панели вкладок, чтобы содержимое не соприкасалось с нижней частью панели.

1 голос
/ 29 ноября 2011

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

...