Paging Toolbar Duplication

[shmoyko]

Hello all,

I've spent hours trying to find the solution to this one, but couldn't find it for whatever reason (possibly my ignorance regarding EXT).

Basically, I have a search field that takes a string. Clicking on the 'search' button produces a nice blue grid with the Paging Toolbar at the bottom. Clicking again on the 'search' button reproduces the results, but adds another paging Toolbar on top of the old one.

Here's the pic:
http://www.autorotation.org/temp/grid.jpg

And here's the code (JS and HTML):


<script type="text/javascript" src="ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="js/RowExpander.js"></script>
<script language="javascript1.2" type="text/javascript">

Ext.onReady(function(){

var results;
var lastSearchText = '';


var btnSearch = Ext.get('btnSearch');
var inpSearchText = Ext.get('searchtext');


btnSearch.on('click', function(){
sendSearch(inpSearchText.getValue());
});

function sendSearch(text)
{
lastSearchText = text;
createDataStore(text);
}


function createDataStore(searchText)
{


var tmpStringURL = 'search.php?outputmode=json&searchtext='+searchText;

var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({
url: tmpStringURL
}),

reader: new Ext.data.JsonReader({
root: 'answers',
totalProperty: 'totalCount',
id: 'question_id',
fields: [
whatever ...
]
})
});
store.setDefaultSort('question_id', 'asc');

var cm = new Ext.grid.ColumnModel([
blah...
]);

cm.defaultSortable = true;

var pagination = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true
});


var grid = new Ext.grid.GridPanel({
el:'grid',
width:700,
height:500,
title:'Blah',
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
iconCls: 'icon-grid',
plugins: expander,
collapsible: true,
stripeRows: true,
bbar: pagination
});





grid.render();

store.load({params:{start:0, limit:25}});
}

function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}

});



</script>
<link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />

Search: <input type="text" id="searchtext" /><button id="btnSearch">Search</button>

<div id="grid">
</div>

Any ideas?

[Lukman]

Probably because everytime the search button is clicked a new pagination toolbar and a new grid are instantiated? The new grid replaces the old grid because you set the same 'el' target but since there is no 'el' target for the new pagination toolbar it just gets appended to the bottom.

I think you need to add checkings to check if the grid and paging toolbar are already created or not so that they are only created once each.

[shmoyko]

Thanks. I thought about that, but the problem is that a different search string will produce a different number of records/pages. So, I need to re-draw the pagination bar for each search.

Is there a way to remove the old toolbar before rendering the new one?

[Lukman]

I think I know why you had to create new grid and paging toolbar for every search, it's because you embed the search string into the http proxy used in the data store, hence you need to create new data store, grid and paging toolbar.

How about creating all those three objects once, leave out the search string from the data store's http proxy but instead pass it out into the store's load() function call:


store.load({params:{start:0, limit:25, searchtext:searchText}})

Not 100% sure if it works because I haven't tried it out yet.

[shmoyko]

Thanks Lukman.
That worked.

But, now I've got another problem:

The PagingToolbar is set up to display 25 records per page:


var pagination = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying Review {0} - {1} of {2}',
emptyMsg: "No Reviews to display"
});


1. Page navigation info shows correct number of pages, e.g. Page 1 of 5
2. The grid however displays all the records
3. The page navigation buttons are just gone crazy, displaying random pages (including the ones from previous searches)

Any ideas?

Many thanks.

[heidtmare]

the grid will show all records its given.
paging is really done on the server.
using the start and limit that gets passed to the server, your server code needs to query accordingly and only return the correct number of records.

your totalCount however needs to be the total of all records,
not just the 25 that you returned.

http://www.extjs.com/deploy/dev/examples/grid/paging.html

[shmoyko]

Yes, of course. That makes sense. Thanks heidtmare.

[shmoyko]

Hello again.

I've been trying to make the pagination buttons work, but no luck.

Is there a way to find what kind of values we can get from the navigation buttons? Clicking on the 'next page' button, for example, we should be able to capture some sort of value in a variable, no?

The script that gets the data is:

var tmpStringURL = 'search.php?outputmode=json&searchtext='+searchText;and I would like the navigation buttons to generate something like

var tmpStringURL = 'search.php?outputmode=json&searchtext='+searchText+'&page=' + buttonClickedValue + '&pageSize=25;Many thanks.