ExtJS Paging (Sayfalama)

Paging (Sayfalama) Nedir?

Bir grid'e çok fazla kayıt geldiğinde hem bağlantı hem browser açısından performans düşüklüğü oluşabilir. Sunucu tarafında da performansı arttırmak gereksinimi ortaya çıkabilir. Bu yüzden browser üzerinde sayfalama yaparak alınan veri sayısı kısıtlanır. Örneğin 1000 kayıt gelmesi yerine her sayfada 100 kayıt gelecek şekilde bir yapı oluşturulur ve bu şekilde 10 sayfa gerektikçe ajax istekleriyle doldurulur. Buna ExtJS'de paging yani sayfalama denir.

Yapılacaklar

Bunun için ihtiyacımız olan şeyler;

1. Grid'e ait store'un autoload'ı false olmalı, daha sonra biz load fonksiyonuyla dolduracağız.
2. Ext.PagingToolbar nesnesi oluşturulur.
3. Oluşturulan paging nesnesi Grid'in bbarözelliğine eklenir.
4. load fonksiyonlarımıza start ve limit değerleri verilir.
5. store'a totalProperty vermemiz gerekiyor
6. baseParams özelliğini vermemiz gerekiyor ki her ajax sorgusunda bu bilgiler ayrıca verilmeye gerek kalmadan gitsin
7. Sunucudan gelecek cevabı ayarlayalım.

Parmaklar Çalışsın

1. Store'umuzu oluşturalım. Örnek olarak bir JsonStore kullandım. Değerlerin geleceği adres de myAjaxUrl.ajax olsun. JSON biçiminde gelecek sunucu cevabı (response) içinde bir kayıtları barındıran bir liste (json array) olacak. Bu listenin adı 'list' olsun. myRecord adında da bir fieldlerimizi saklayan bir Record olsun. Store otomatik ajax isteği yapıp dolmasın diye autoload: false değerini verelim.

var myRecord = new Ext.data.Record.create([
	{name:'tip',type:'int'},
	{name:'sehir',type:'string'},
	{name:'adres',type:'string'}
]);

var myStore = new Ext.data.JsonStore({ 
	url: 				"myAjaxUrl.ajax",
	root: 				'list',
	fields: 			myRecord,
	autoload: 			false
});

2. PagingToolbar nesnesini oluşturalım.

var myPaging = new Ext.PagingToolbar({
	pageSize:	100,
	width:		600,
	store:		myStore,
	displayInfo: 	true,        
	displayMsg: 	'Toplam Kayıt: {2}, (Gösterilen:{0}-{1})',
	emptyMsg: 	"Görüntülenecek kayıt yok."
});

3. PagingToolbar'ı grid'e eklemek için grid'in bbarözelliğine atıyoruz.

bbar:	myPaging

4. start değeri başlangıç kayıt numarası, limit değeri ise her sayfada gelecek kayıt sayısıdır

myStore.load({params:{start:0, limit:100}});

5. Store'a totalProperty değerini verelim. totalCount yerine farklı bir değer de verilebilir, önemli olan sunucudan gönderdiğimiz anahtar kelime

totalProperty: 'totalCount'

6. Store'a baseParams değerini atayalım.

myStore.baseParams = {
	sehir: 'Ankara',
	tip: 1
};

7. Bundan sonra sunucudan gelecek değer yazdıklarımızla uyumlu olmalı. Sunucuda kullandığınız teknolojiye göre bunu kendimiz programlayacağız. Ext tarafında önemli olan gelecek cevabın uygun olması. Öncelikle json formatlı bir dizi (array) bekliyoruz. myStore'da root olarak verdiğimiz değer bu dizinin 'key'i olacak. Yani bir obje olacak, içinde de bir dizi olacak, örneğimizde bu key 'list'. Buna göre beklediğimiz değer şunun gibi:

{list:[obje1,obje2,obje3,...]}

Bunun yanında totalProperty değeri de root değerinin yanında bir obje olarak gelmeli. Örneğimizde 'totalCount' olarak verdiğimize göre şöyle olmalı;

{list:[obje1,obje2,obje3,...],totalCount:500}

Yani 'list' adlı dizideki objeler sayfada görünecek, diğerleri Ext tarafına aktarılmayacak. Toplamda da (örneğimize göre) 500 adet listelenecek obje var, buna göre sadece params olarak gönderdiğimiz parametrelerden 'limit' değeri kadar (örneğimize göre 100 adet) sayfada görünecek. hangi sayfada olduğumuz bilgisini ise Ext, sunucu tarafından aldığı bilgiye göre gösterecek.

Demo şu an mevcut değil. İş yoğunluğundan vakit bulabilirsem demoyu da hazırlamayı düşünüyorum.