extjs4- ext.tab.panelを拡張して高さの値の設定を防ぐ

StackOverflow https://stackoverflow.com/questions/8302176

質問

私はextjs 3.xからV4にアプリケーションを移行しており、「自動ハイト」プロパティが削除された今、TabpanelのTabpanelにいくつかの問題を抱えています。パネルの高さを明示的に定義しない場合、「自動高さ」であると想定されていますが、それはある程度のみです。

extjs4では、高さセットのないタブパネルには、タブパネルのDivにインラインCSS高さの値が設定されており、それらの高さは各タブアイテムのコンテンツの初期高さから計算されます。そして、はい、タブ項目の子コンポーネントの高さを更新すると、タブの高さが再計算されて再計算されます。または、タブにRAW HTMLが含まれている場合、タブの更新（）メソッドがそのコンテンツを変更するために使用されます。再びその高さは、フィットするように調整されます。

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

これを回避するために、私がやりたいことは、タブパネルの含有要素が常に高さに設定されていることを確認することです。私はこれを達成するために私はタブパネルを拡張する必要があると思いますが、私はどの方法を上書きする方法、ECTに関してどこから始めればいいのかわかりません。何かご意見は？

役に立ちましたか？

解決

これが私がやってきたことです。それは間違いなく理想的ではありません、かなりハッキーですが、うまくいっているようです。たぶん誰かが私が今達成しようとしていることをよりよく見て、より良い実装を思いつくことができる:-) 

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'});
        });
    }
});

「マージンボトム」値をに追加することをお勧めします style コンテンツがパネルの下部に突き当たるのを防ぐためのタブパネルの構成。

他のヒント

キャッチーな部分は、extjsにコンポーネントが更新されていることを認識させることです。基本的に、コンポーネントレイアウトを再計算する必要があります。この方法を使用できます doLayout( ) パネルクラスで利用できます。これを呼び出すことで、あなたはレイアウトに再計算されてリフレッシュするように強制的に求めています。これはあなたを助けるべきだと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top