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の値を印刷するとその理由がわかります.
単純改ページ:
 
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
		]
	});


//     ,            。