为什么在点击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 - （在你的情况下）不是。