examples/ux/form/SearchField.js

   1 Ext.define('Ext.ux.form.SearchField', {
   2     extend: 'Ext.form.field.Trigger',
   3
   4     alias: 'widget.searchfield',
   5
   6     trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
   7
   8     trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
   9
  10     hasSearch : false,
  11     paramName : 'query',
  12
  13     initComponent: function(){
  14         this.callParent(arguments);
  15         this.on('specialkey', function(f, e){
  16             if(e.getKey() == e.ENTER){
  17                 this.onTrigger2Click();
  18             }
  19         }, this);
  20     },
  21
  22     afterRender: function(){
  23         this.callParent();
  24         this.triggerEl.item(0).setDisplayed('none');
  25     },
  26
  27     onTrigger1Click : function(){
  28         var me = this,
  29             store = me.store,
  30             proxy = store.getProxy(),
  31             val;
  32
  33         if (me.hasSearch) {
  34             me.setValue('');
  35             proxy.extraParams[me.paramName] = '';
  36             proxy.extraParams.start = 0;
  37             store.load();
  38             me.hasSearch = false;
  39             me.triggerEl.item(0).setDisplayed('none');
  40             me.doComponentLayout();
  41         }
  42     },
  43
  44     onTrigger2Click : function(){
  45         var me = this,
  46             store = me.store,
  47             proxy = store.getProxy(),
  48             value = me.getValue();
  49
  50         if (value.length < 1) {
  51             me.onTrigger1Click();
  52             return;
  53         }
  54         proxy.extraParams[me.paramName] = value;
  55         proxy.extraParams.start = 0;
  56         store.load();
  57         me.hasSearch = true;
  58         me.triggerEl.item(0).setDisplayed('block');
  59         me.doComponentLayout();
  60     }
  61 });