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;
        }
    },