爲什麼在點擊ExtJS 4.2.2文本輸入框時點擊事件不會再次觸發

Question

在下面的ExtJS 4.2.2代碼中，您可以在「搜索」和「顯示標籤」控件上重複點擊，標籤「here is文字「將切換可見/隱藏。

但是，如果您在搜索文本輸入字段中單擊，則只有在您第一次單擊時纔會隱藏該標籤。如果您再點擊「顯示標籤」再次顯示標籤，然後再次點擊搜索文本輸入框，如果標籤沒有隱藏。

Ext.define('MyToolbar', { 
    extend: 'Ext.grid.feature.Feature', 
    alias: 'feature.myToolbar', 
    requires: ['Ext.grid.feature.Feature'], 
    width: 160, 

    init: function() { 
     if (this.grid.rendered) 
      this.onRender(); 
     else{ 
      this.grid.on('render', this.onRender, this); 
     } 
    }, 

    onRender: function() { 
     var panel = this.toolbarContainer || this.grid; 
     var tb = panel.getDockedItems('toolbar[dock="top"]'); 
     if (tb.length > 0) 
      tb = tb[0]; 
     else { 
      tb = Ext.create('Ext.toolbar.Toolbar', {dock: 'top'}); 
      panel.addDocked(tb); 
     } 
     this.createSearchBox(tb); 
    }, 

    createSearchBox: function (tb) { 
     tb.add({ 
      text: 'Search', 
      menu: Ext.create('Ext.menu.Menu'), 
      listeners: { 
       click: function(comp) { 
        MyApp.app.fireEvent('onGridToolbarControlClicked', comp); 
       } 
      } 
     }); 

     this.field = Ext.create('Ext.form.field.Trigger', { 
      width: this.width, 
      triggerCls: 'x-form-clear-trigger', 
      onTriggerClick: Ext.bind(this.onTriggerClear, this) 
     }); 

     this.field.on('render', function (searchField) { 
      this.field.inputEl.on('click', function() { 
       MyApp.app.fireEvent('onGridToolbarControlClicked', searchField); 
      }, this, {single: true}); 
     }, this, {single: true}); 

     tb.add(this.field); 
    } 
}); 

Ext.define('MyPage', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.myPage', 
    flex: 1, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [{ 
       xtype: 'container', 
       layout: { 
        type: 'vbox', 
        align: 'middle' 
       }, 
       items: [{ 
        xtype: 'button', 
        text: 'Show Label', 
        handler: function(comp) { 
         comp.up('myPage').down('label').setVisible(true); 
        } 
       },{ 
        xtype: 'label', 
        itemId: 'testLbl', 
        text: 'here is the text' 
       },{ 
        xtype: 'gridpanel', 
        width: 250, 
        height: 150, 
        store: Ext.create('Ext.data.Store', { 
         fields: ['name'], 
         data: [ 
          {name: 'one'}, 
          {name: 'two'}, 
          {name: 'three'} 
         ] 
        }), 
        columns: [{ 
         text: 'Text', 
         flex: 1, 
         dataIndex: 'name' 
        }], 
        features: [{ 
         ftype: 'myToolbar' 
        }] 
       }] 
      }] 
     }); 

     me.callParent(arguments); 

     MyApp.app.on({onGridToolbarControlClicked: function(comp) { 
      if('function' == typeof comp.up && !Ext.isEmpty(comp.up('myPage')) && 
       'function' == typeof comp.up('myPage').down && 
       !Ext.isEmpty(comp.up('myPage').down('label'))) { 
       comp.up('myPage').down('label').setVisible(false); 
      } 
     }}); 
    } 
}); 

Ext.onReady(function() { 
    Ext.application({ 
     name: 'MyApp', 
     launch: function() { 
      Ext.create('Ext.container.Viewport', { 
       renderTo: Ext.getBody(), 
       width: 700, 
       height: 500, 
       layout: 'fit', 
       items: [{ 
        xtype: 'myPage' 
       }] 
      }); 
     } 
    }); 
}); 

Answer 1

這裏

this.field.inputEl.on('click', function() { 
      MyApp.app.fireEvent('onGridToolbarControlClicked', searchField); 
     }, this, {single: false}); 

，而不是在你的代碼{single:true}。 onRender是單一的，onClick - （在你的情況下）不是。