EXT comboboxのページ分けは実は簡単です
最初はEXTのページングが徹底していなかったので、comboboxのページングをするにはどうやって手をつけるか分かりません.しばらく使ってやっと分かりました.EXTのページングを習ったばかりの頃は彼の原理が分からなかったが、実は簡単で、非同期リクエストのjsonデータをgridに埋め込むことだった.ページ分割は実際にはいくつかのパラメータの制御にすぎないが、start、limitには重要なパラメータbaseParamsがある.私たちはよくページングの状況に遭遇し、分類されたデータをページングします.習い始めたばかりで、分類しないデータのページ分けが分からないので、分類データのページ分けは言うまでもありません.ここでは3つの状況をまとめて、参考にして、初心者に役立つかもしれません.1つ目は、同類データのページング、2つ目は、分類データのページングです.3つ目:comboboxページを追加します.
gridページングでは、この3つのパラメータの意味を理解する必要があります.startはどのレコードから始まるかを示し、limitは何レコードpageSizeを表示するかを示す.mysqlでデータベースがselect*from tb_を読み込むようにxx limit $start,$limit; バックグラウンドでこれらのクエリーデータをjson形式で印刷すればOKです.残りの動作は、ページングが自動的に完了します.firfox+firbugでデバッグし、$startと$limitの値を印刷するとその理由がわかります.
単純改ページ:
分類データのページング:データ分類管理の状況に遭遇することが多く、同時に分類の結果をページングする.以前習ったばかりの時にstart、limitの上で足を動かしたり、他の方法を採用したりしてみましたが、実はそんなに複雑ではありません.WEB開発をしたことがある人は知っています.分類してページを分けてパラメータを多く伝え、多く伝わるこのパラメータ値を変化させてください.このパラメータはbaseParamsを介して伝達されます.ここでは、マルチパスのパラメータがtypeであると仮定します.次のコードを参照してください.
ここで上との違いはbaseParams:{type:0},typeのデフォルト値は0であり,より多くのパラメータを渡すには,そのまま後ろに書けばよい.baseParams:{type:0,other:1},またはbaseParams:{type:'all',other:'not'}の値が渡されました.baseParamsをどのように変更するかは簡単です.person_ds.baseParams = {type:2}; あなたのイベントに追加して、reloadすればいいです.このときバックグラウンドでは、パラメータstart、limit、typeを取得する調整を行います.クエリー文:select*from tb_xx where type='$type' limit $start,$limit; 印刷jsonが完了しました.
comboboxドロップダウン選択ページ:最初はどうやって手をつけるか分からなかったし、パラメータをどう伝えるか分からなかったし、limitを変えたのか?それともbaseParamsを変えますか?ネット上でいくつかの関連例を探して、少し複雑に見えるので、自分で簡単なことをしたいと思っています.原理は簡単です.ドロップダウンリストの値を選択したときにlimitパラメータ値をもっと行けばいいです.この時私はlimitの値を変えたいと思っていました.
person_ds.reload({params:{start:0,limit:parseInt(comboBox.getValue()}});
これで最初のページは問題なく、ページをめくると問題が発生します.limitはまた10.....PagingToolbarにpageSizeパラメータがあることを覚えています.この値を変更すると成功しました.pageSizeを変更するのはlimitの値を変更したのと同じです.コードは以下の通りです.
gridページングでは、この3つのパラメータの意味を理解する必要があります.startはどのレコードから始まるかを示し、limitは何レコードpageSizeを表示するかを示す.mysqlでデータベースがselect*from tb_を読み込むようにxx limit $start,$limit; バックグラウンドでこれらのクエリーデータをjson形式で印刷すればOKです.残りの動作は、ページングが自動的に完了します.firfox+firbugでデバッグし、$startと$limitの値を印刷するとその理由がわかります.
単純改ページ:
var client_cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
client_check_select,
{header:'ID',dataIndex:'id',width:40,sortable:true},
.....................................
]);
var person_ds = new Ext.data.Store({
id: 'client_datasource',
proxy: new Ext.data.HttpProxy({url:'grid.php'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'user_name'},
{name: 'ip_addr'}
])
});
var grid = new Ext.grid.GridPanel({
ds: person_ds,
cm: client_cm,
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: ' {0} {1} , {2} ',
emptyMsg: " "
})
});
person_ds.load({params:{start:0,limit:10}});
getParameter. start,limit, 。
json, 。
分類データのページング:データ分類管理の状況に遭遇することが多く、同時に分類の結果をページングする.以前習ったばかりの時にstart、limitの上で足を動かしたり、他の方法を採用したりしてみましたが、実はそんなに複雑ではありません.WEB開発をしたことがある人は知っています.分類してページを分けてパラメータを多く伝え、多く伝わるこのパラメータ値を変化させてください.このパラメータはbaseParamsを介して伝達されます.ここでは、マルチパスのパラメータがtypeであると仮定します.次のコードを参照してください.
var person_ds = new Ext.data.Store({
id: 'client_datasource',
baseParams: {type:0},
proxy: new Ext.data.HttpProxy({url:'grid.php'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'machine_name'},
{name: 'user_name'}
])
});
ここで上との違いはbaseParams:{type:0},typeのデフォルト値は0であり,より多くのパラメータを渡すには,そのまま後ろに書けばよい.baseParams:{type:0,other:1},またはbaseParams:{type:'all',other:'not'}の値が渡されました.baseParamsをどのように変更するかは簡単です.person_ds.baseParams = {type:2}; あなたのイベントに追加して、reloadすればいいです.このときバックグラウンドでは、パラメータstart、limit、typeを取得する調整を行います.クエリー文:select*from tb_xx where type='$type' limit $start,$limit; 印刷jsonが完了しました.
comboboxドロップダウン選択ページ:最初はどうやって手をつけるか分からなかったし、パラメータをどう伝えるか分からなかったし、limitを変えたのか?それともbaseParamsを変えますか?ネット上でいくつかの関連例を探して、少し複雑に見えるので、自分で簡単なことをしたいと思っています.原理は簡単です.ドロップダウンリストの値を選択したときにlimitパラメータ値をもっと行けばいいです.この時私はlimitの値を変えたいと思っていました.
person_ds.reload({params:{start:0,limit:parseInt(comboBox.getValue()}});
これで最初のページは問題なく、ページをめくると問題が発生します.limitはまた10.....PagingToolbarにpageSizeパラメータがあることを覚えています.この値を変更すると成功しました.pageSizeを変更するのはlimitの値を変更したのと同じです.コードは以下の通りです.
//
var pagesize_combo = new Ext.form.ComboBox({
store: page_size_store,
width:50,
readOnly:true,
emptyText: '10',
mode: 'remote',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
});
// , pageSize.
pagesize_combo.on("select",function(comboBox){
page_toolbar.pageSize = parseInt(comboBox.getValue());
person_ds.reload({params:{start:0,limit:page_toolbar.pageSize}});
});
//
var page_toolbar = new Ext.PagingToolbar({
region:'south',
pageSize: 10,
store: client_person_ds,
displayInfo: true,
displayMsg: ' {0} {1} , {2} ',
emptyMsg: " ",
items:[
' :',
pagesize_combo
]
});
// , 。