searchField modified

[op.vini]

New searchField.js with no bugs and new methods and property.



/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*
# modificado por Vinícius Nunes Lage
# estagiário da Câmara Municipal de Ouro Preto
*
*/

Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.app.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',
params: {},
beforeClear: function(){},
afterClear: function(){},
beforeSeach: function(){},
afterSeach: function(){},

onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
//this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = '';
if(this.beforeClear) this.beforeClear();
this.store.reload({params: this.params, callback: this.afterClear });
this.triggers[0].hide();
this.hasSearch = false;
}
},

onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
//this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = v;
if(this.beforeSearch) this.beforeSearch();
this.store.reload({params: this.params, callBack: this.afterSearch });
this.hasSearch = true;
this.triggers[0].show();
}
});
With this new code, you can use the methods: beforeClear(), afterClear(), beforeSearch(), afterSearch() and add params to your searchField.

I packed a few bugs too, show in the commented lines.

;)

[op.vini]

example



var buscaRapidaOficios = new Ext.app.SearchField({
fieldLabel: 'Busca rápida',
store: myStore,
width: 100,

params: {start: 0, limit: 20}, // new property
beforeClear: function(){alert('vai limpar');}, // new method
afterClear: function(){alert('limpou')},// new method
beforeSearch: function(){alert('vai procurar');},// new method
afterSearch: function(){alert('procurou')}// new method
});

[Lmouse]

Ext JS Library 3.0?

[riuslex]

Ext JS Library 3.0?

Tested on Ext 3.0.3. It only has the added functions, no params.

Works on custom example from forms.




Ext.ns('Ext.ux.form');

Ext.app.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',
params: {},
beforeClear: function(){},
afterClear: function(){},
beforeSeach: function(){},
afterSeach: function(){},


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

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

[Cipher]

Thanks for contribution. I use it since Ext 2.0, it's realy useful.

I tried it on Ext.3.1, it works perfect, beside one:
When I clear the value, it will reload again, but, the query value still in params,
so, I add one line code to fix the problem.



onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
// this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = '';
this.params[this.paramName] = ''; //if don't do it, the query will take the old value.
if(this.beforeClear) this.beforeClear();
this.store.reload({params: this.params, callback: this.afterClear });
this.triggers[0].hide();
this.hasSearch = false;
}
},