1

3.x では、TabPanel の「autoHeight」プロパティを設定するだけで、これを行うのは非常に簡単でした。「defaults」構成を介してその子項目についても同じことを行います。ただし、4.x でこれを実現する方法はまだ見たことがありません。タブはコンテンツの初期の高さに合わせてサイズ調整されますが、初期化後にコンテンツの高さが何らかの理由で変更された場合、タブのコンテンツは非表示/スクロールされます。

私はすでにいくつかの検索を行いましたが、このテーマに関する sencha の公式フォーラムで最も一般的に提案された解決策は、tabpanel の親コンテナーのレイアウトを「フィット」として構成し、align を「stretch」などに設定することでした。しかし、私の場合、TabPanel は子ではありません。別のExtコンポーネントの場合、ページの本文のどこかにあるストレートな非ext生成が「renderTo」されるため、これらのソリューションは適用されません。

何か案は？

4

2 に答える 2

3

これは、誰かが興味を持った場合の私の解決策です。これは間違いなく理想的ではなく、かなりハックですが、問題なく動作するようです。たぶん、誰かが私が今達成しようとしていることをよりよく理解し、より良い実装を考え出すことができるでしょう:-)

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コンテンツがパネルの下部に突き当たるのを防ぐことができます。

于 2011-12-06T14:35:13.303 に答える