Создание «автоматической высоты» TabPanel в ExtJS 4, которая отображается в не-extjs HTML? - PullRequest
Новая
       53

Создание «автоматической высоты» TabPanel в ExtJS 4, которая отображается в не-extjs HTML?

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

Это было довольно легко сделать в 3.x, просто установив свойство "autoHeight" для TabPanel и то же самое для его дочерних элементов через конфигурацию "defaults".Однако, я еще не видел способ сделать это в 4.x.Размер вкладок изменяется в соответствии с начальной высотой их содержимого, однако, если высота этого содержимого изменяется по какой-либо причине после инициализации, содержимое вкладок скрывается / прокручивается.

Я выполнил поиск уже и в официальном приложении Sencha.На форумах по этой теме наиболее часто предлагаемое решение состояло в том, чтобы настроить макет родительского контейнера tabpanel как «fit», установив align на «stretch, ect. Однако в моем случае TabPanel не является дочерним элементом другого компонента Ext, это« renderTo"Я создал прямой не-ext сгенерированный, который находится где-то в теле моей страницы, поэтому эти решения не будут применяться.

Есть идеи?

Ответы [ 2 ]

3 голосов
/ 06 декабря 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 голос
/ 11 декабря 2012

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

...