PDA

View Full Version : pager with extjs



rrenfro
30 Jan 2008, 8:04 AM
Hi I am currently working on an application with cakephp and extjs. Currently I have set up a form with an option select which allows the user to view people by the group they selected. I would like to paginate the results via ajax e.g. only reload what has changed into a div called "people".

The problem I am having is that the first request works fine. The server returns the html result including the paging links. When I click on the links they are sent as normal requests which means that the entire page is loaded. What I need to do is somehow "select" and modify the paging links to be sent via ajax instead.

this is my setup:
HTML Form with option select:


<form onsubmit="return false">
<p id="ext-gen13">
<b>Suche:</b>
<select id="livefilter" size="1" name="livefilter">
<option id="ext-gen34" value="all">Alle anzeigen</option>
<option id="ext-gen14" value="group-1">Group 1</option>
<option id="ext-gen35" value="group-49">Group 200</option>
</select>
</p>
</form>

example paging link html:


<a id="ext-gen43" class="pager" href="/people/liveFilter/livefilter:all/page:2">2</a>
<a id="ext-gen43" class="pager" href="/people/liveFilter/livefilter:all/page:3">3</a>
etc.


extjs setup:
The LiveFilter function is called on page load and attaches the change listener to the option select. Then the div people is loaded via load(). I have set the callback of the load operation to the initPager hoping that I can change the paging links. Somehow this approach is not working and I do not know why.



// liveFilter
liveFilter: function() {

Ext.get('livefilter').on('change', function(){
var str = Ext.get('livefilter').dom.value;
var el = Ext.get("people");

if(str) {
var el = Ext.get("people");
el.load({
url: '/people/liveFilter', // replace with your url
params: "livefilter=" + str,
text: "Loading...",
callback: this.initPager
});
}

});

},

initPager: function() {
Ext.select("a.pager").on('click', function(){
var url = this.href;
this.href = '#';
var el = Ext.get("people");
el.load({
url: url, // replace with your url
text: "Loading..."+ url
});

});
},




Thanks for your help.