複数タブ内のグリッドの表示について

[yoshida]

はじめまして。yoshidaと申します。

当方、Extjs2.2.1で開発を始めたのですが、
EditorGridPanelをTabPanelで切り替える機能を
作成していたところ、初期表示のタブのグリッドは
問題無いのですが、他のタブで表示されるグリッドの
スクロールバーが縦も横も表示されません。
さらに、その状態でカーソルキーで下にスクロールさせると
グリッドのヘッダが消えてしまい、上にスクロールさせても
もう表示もされません。
初期表示させるタブを変更すると、そのグリッドは正しく
表示されます。

使用ブラウザはIE6です。

この問題の解決方法はありますでしょうか・・・
どうぞご教示よろしくお願いします。

[yuki]

なんとなくレイアウト関連のコンフィグオプションが正しく設定されてなさそうだな、という印象なのですが、可能であれば現象を際限するURLかサンプルコードをお願いします:)

[yoshida]

返信、ありがとうございます。
サンプルコードを添付いたします。
よろしくお願いします。

[yuki]

添付されていたサンプルの方法でやるのであれば、tabSample.jsの最後のほうに、


tabs.on("tabchange",function(t,tab){
if(tab.contentEl=="Tab2"){
grid2.view.layout();
}
},{single: true});


といったコードを入れれば、ほぼ問題は解決します。
・・・
問題の原因は、タブパネルの存在によって、display=none状態になっているGridPanelのrenderメソッドを呼んでしまっていることにより、そのGridPanelのviewのレンダリングが途中で終了してしまっていることにあります（上のコードも本来はGridViewのprivateメソッドなのであまり好ましい方法ではありません）。
・・・
Ext JSの一般的な書き方としては、Component（とそのサブクラス）については、可能な限り「new」を使わないで、「xtype」による遅延レンダリングを行うという方法があります。xtypeを使うことにより、今回のようなTabPanelなどの利用時に、表示されていないタブの中のComoponentについて、それが最初に表示されるときに初めてレンダリングするといった制御をExtが自動的に行ってくれます（結果として、処理・描画速度の向上が見込めます）。
・・・

また、特に理由が無い限り、contentElやrenderメソッドを使うこともないかと思います。・・・
参考に、xtypeを使った場合のコード例を挙げておきます：


var grid1 = {
xtype: 'grid';
store: store1,
cm: cm1,
width: 300,
height: 220,
frame: false,
autoScroll: true,
clicksToEdit: 1,
title: 'grid2',
enableHdMenu: false,
enableColumnResize: false
});

var grid2 = ... // grid2の定義

var tabs = new Ext.TabPanel({
renderTo: 'tabSample',
width: 850,
height: 280,
activeTab: 0,
frame: true,
items: [
grid1,
grid2
]
});

[yoshida]

無事、問題解決いたしました！
詳細なご説明、ありがとうございます。
大変参考になり、助かりました。
どうやら私は基本的な知識が足りないようですね・・・:((