gridのページングについて

[ak_ext]

サンプルでグリッドのページングを作ったのですが、
http://extjs.cachefly.net/ext-2.2.1/ext-all.js　などcacheflyのリンクを張ると
ページング下部のボタン画像が出るのですが、
このソースをローカルに落としてローカルで見ると何故か画像が出ません
(機能自体は効いている)これは自分の環境だけでしょうか。

os xp pro ブラウザ　IE6 ext2.2.1

[yuki]

スクリーンショットはありますか？

[ak_ext]

添付しました。　
グリッドのページング部分の画像が出てないのを確認できると思います。

[integra]

ローカルだとSDKを解凍して出来るresourcesディレクトリが全部必要だと思います。
FireFoxのFirebugを使用して開発するとミスに気づきやすくていいですよ！

[ak_ext]

ありがとうございます。画像が出てきました。

gridのページング自体はできたのですが、
ページングの単位をプルダウンで動的に変える
サンプルを作りたいのですが、
どのようにするのがよいのでしょうか。。

グリッドを取得してページカウントをセット→storeロード
という感じでサンプルを作ったのですが、動きませんでした・・
何卒宜しくお願いします。

[integra]

ページングの単位をプルダウンで動的に変える
サンプルを作りたいのですが、


とりあえずサンプルを動かしてみましたが、
grid.jsのPlanLedgerGridEx.firstGridの指定でうまく行ってないみたいですよ。
firstGridにIDを指定してExt.getCmp()で取得するようにして動かしてみましたが、
どうもうまく動かないみたいですね。

Ext.ux.Andrie.pPageSize (http://extjs.com/forum/showthread.php?t=17257)
Live Demo (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.pPageSize/pPageSize_test.htm)
http://extjs.com/forum/showthread.php?t=17257

このプラグインを採用するか、やっていることを調査するとよいかもしれません。

[ak_ext]

ありがとうございます。
自分もそこで詰まっていたのですが、
作り直したら、プルダウンに反応するようになりました。
初期表示の数は動的に変えられるのですが、
next,prevを押すとおかしくなります。

やはりLive Demoでやってる事を
調査した方が早そうかもです。

[ak_ext]

原因はよく分からなかったですが、
プラグインで解決しました。

[yuki]

grid.jsに2つ間違いがあります：


function changeGridPage(page)
{
var pageCount = page.options[page.selectedIndex].value;
MenuGridEx.firstGrid.bbar.pageSize = pageCount;
MenuGridEx.firstGrid.getBottomToolbar().pageSize = parseInt(pageCount);
MenuGridEx.firstGrid.store.load({params:{start:0, limit:pageCount}});
}

上の赤字部分を：

function changeGridPage(page)
{
var pageCount = page.options[page.selectedIndex].value;
MenuGridEx.firstGrid.getBottomToolbar().pageSize = parseInt(pageCount);
MenuGridEx.firstGrid.getBottomToolbar().pageSize = parseInt(pageCount);
MenuGridEx.firstGrid.store.load({params:{start:0, limit:pageCount}});
}

と変更してあげればプラグインを使わずに動かせます。

ちなみに、Panel（とそのサブクラス）のツールバーを取得するには、getBottomToolbar()/getTopToolbar()というメソッドがそれぞれ用意されているので、そっちを使ってください。

紛らわしいですが、コンフィグオプションのtbar/bbarは、パネルのレンダリング処理の中で、ツールバーオブジェクトではなく、ツールバーを内包するElementを指すプロパティに変換されているので、それにpageSizeをセットしても何も起きません。

Panel.initComponentで一旦消されて・・・

initComponent : function(){
（途中省略）

// shortcuts
if(this.tbar){
this.elements += ',tbar';
if(typeof this.tbar == 'object'){
this.topToolbar = this.tbar;
}
delete this.tbar;
}
if(this.bbar){
this.elements += ',bbar';
if(typeof this.bbar == 'object'){
this.bottomToolbar = this.bbar;
}
delete this.bbar;
}
（以下省略）

Panel.onRenderで別のものに変更

onRender : function(ct, position){
Ext.Panel.superclass.onRender.call(this, ct, position);

this.createClasses();

if(this.el){ // existing markup
this.el.addClass(this.baseCls);
this.header = this.el.down('.'+this.headerCls);
this.bwrap = this.el.down('.'+this.bwrapCls);
var cp = this.bwrap ? this.bwrap : this.el;
this.tbar = cp.down('.'+this.tbarCls);
this.body = cp.down('.'+this.bodyCls);
this.bbar = cp.down('.'+this.bbarCls);
this.footer = cp.down('.'+this.footerCls);
this.fromMarkup = true;
（以下省略）

[ak_ext]

ありがとうございます。ご指摘頂いた部分を変更したら問題なく動きました。
プルダウンを外出しにできるという事は、next,prevボタン　また
pageラベルも外に出せるのでしょうか。

[yuki]

プルダウンを外出しにできるという事は、next,prevボタン　また
pageラベルも外に出せるのでしょうか。
外でももちろんできますよ（Ext.PagingToolbarのソースを参考にしてみてください）

[ak_ext]

pagingToolbarを参考にしてnextの処理を
サンプルに書いてみたのですが、押すとエラーは出ないのですが、
画面が消えてしまって・・・
var ds = MenuGridEx.firstGrid.store;
var toolbar = MenuGridEx.firstGrid.getBottomToolbar();
ds.load({params:{start: toolbar.cursor+toolbar.pageSize, limit: toolbar.pageSize}});
処理をそのまま書きました。