2

アプリケーションをExtJS3.xからv4に移行していますが、「autoHeight」プロパティが削除されたため、TabPanelで問題が発生しています。パネルの高さを明示的に定義しない場合、それは「自動高さ」であると見なされることを私は知っていますが、それはある程度真実です。

ExtJS4では、高さが設定されていないタブパネルでは、タブパネルに含まれるdivにインラインcss高さの値が設定され、これらの高さは各タブアイテムのコンテンツの初期の高さから計算されます。はい、タブアイテムの子コンポーネントの高さを更新すると、タブの高さがそれに合わせて再計算されます。または、タブに生のHTMLが含まれ、タブのupdate（）メソッドを使用してそのコンテンツが変更されます。その高さは、フィットするように調整されます。

とにかく私のアプリケーションで問題があるのは、jQuery.html（）などのExtJSのフレームワーク以外のメソッドを使用して、これらのタブの生のHTMLコンテンツを更新することです。このコンテンツの変更はタブパネルに通知されないため、タブの高さの値は再計算されません。

これを回避するために私がしたいのは、タブパネルの要素を含む要素が、レンダリング、再レンダリング、またはその他のときに常にheight：autoに設定されていることを確認することです。私はこれを達成するためにTabPanelを拡張する必要があると想定していますが、オーバーライドするメソッドなど、どこから始めればよいのかわかりません。何かご意見は？

4

2 に答える 2

2

これが私がやったことです。それは間違いなく理想的ではなく、かなりハックですが、うまくいくようです。たぶん、誰かが私が今達成しようとしていることをよりよく理解し、より良い実装を考え出すことができるでしょう:-)

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-02T14:22:07.163 に答える
1

キャッチーな部分は、コンポーネントが更新されたことを ExtJS に認識させることです。基本的に、コンポーネントのレイアウトを再計算する必要があります。doLayout( )Panel クラスで使用可能なメソッドを使用できます。これを呼び出すことで、レイアウトの再計算と更新を強制的に要求しています。これはあなたを助けるはずだと思います。

于 2011-11-29T06:13:18.003 に答える