PDA

View Full Version : SearchField Result Broke the Page Number



zakif
5 Jan 2012, 4:01 AM
Dear all,

I use SearchField.js (Ext.ux.form.SearchField) in grid. The result showed up properly, except the page number. For example, the grid has 10 pages. The search result produce 3 pages. But when the next button is clicked to page 4, 5, 6, and so on, there is only blank page.

Here is the code of SearchField.js:


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.form');

Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.ux.form.SearchField.superclass.initComponent.call(this);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
},

validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramName : 'query',

onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
var o = {start: 0, limit:20};
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = '';
this.store.reload({params:o});
this.triggers[0].hide();
this.hasSearch = false;
}
},

onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
var o = {start: 0, limit:20};
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = v;
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
}
});

How to fix that?

Thanks in advance.

mitchellsimoens
5 Jan 2012, 9:21 AM
You need to set the page back to zero if it didn't.

zakif
5 Jan 2012, 7:56 PM
Thanks, Micthell for your clue.

But how to set the page back to zero?

Because on SearchField.js I've define the params for grid page:


this.store.reload({params: o});

in which o is the variable defined es follow:


var o = {start: 0, limit:3};


Thank you again.

zakif
30 Jan 2012, 3:55 AM
I've tried several solutions. Recently, I've changed the code become:



new Ext.ux.form.SearchField({
store: applabel_store,
width:200,
emptyText : 'Type here ...',
params : {start: 0, limit: 20,pageSize:20},
afterSearch : function(){
grid.store.load()
}


Unfortunately, the problem is still remains.

How is actually to synchronize search (through Ext.ux.form.SearchField) result and page number (PagingToolbar)?