Results 1 to 5 of 5

Thread: searchField modified

  1. #1
    Ext User
    Join Date
    May 2009
    Posts
    6
    Vote Rating
    0
      0  

    Default searchField modified

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

    Code:
    /*
     * Ext JS Library 2.0.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     *
     # modificado por Vincius Nunes Lage
     # estagirio da Cmara 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.


  2. #2
    Ext User
    Join Date
    May 2009
    Posts
    6
    Vote Rating
    0
      0  

    Default example

    example

    Code:
    var buscaRapidaOficios = new Ext.app.SearchField({
              fieldLabel: 'Busca rpida',
              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
    });

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    11
    Vote Rating
    0
      0  

    Question

    Ext JS Library 3.0?

  4. #4
    Sencha User
    Join Date
    Oct 2009
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Lmouse View Post
    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.


    Code:
    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();
        }
    });

  5. #5
    Ext User Cipher's Avatar
    Join Date
    Mar 2007
    Location
    Taiwan
    Posts
    14
    Vote Rating
    0
      0  

    Default

    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.

    PHP Code:
        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.beforeClearthis.beforeClear();
                
    this.store.reload({paramsthis.paramscallbackthis.afterClear });
                
    this.triggers[0].hide();
                
    this.hasSearch false;
            }
        }, 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •