在对象创建时添加搜索字段键侦听器？答案

【问题标题】：Adding a searchfield keyup listener on object creation?在对象创建时添加搜索字段键侦听器？
【发布时间】：2012-04-30 19:51:55
【问题描述】：

在另一个问题中，有人解释了如何创建通用搜索嵌套列表框。

How to add a Search Bar to a Nested List?

如何在创建时向此类添加/设置 keyup 侦听器？我可以在类上添加监听器，但我想在多个屏幕上重用这个类。

Ext.define('Sencha.view.SearchBar', { 扩展：'Ext.Toolbar'， xtype : '搜索栏', 要求：['Ext.field.Text', 'Ext.field.Search'], 配置：{ ui: '搜索栏', 布局：'vbox'， cls: '大', 项目： [ { xtype: '搜索域', placeHolder: '搜索...', 听众：{ 范围：这个，键：函数（字段）{ console.log(field.getValue()); } } } ] } });

此时我可以将侦听器直接添加到搜索字段吗？

var searchBar = nestedList.add({ 停靠：'顶部'， xtype: '搜索栏', 身高：100 });

我也尝试添加这样的监听器，但我认为我需要能够直接访问该字段

searchBar.on('keyup', function(field) { console.log("foo..."); console.log(field.getValue()); }，这）;

======================================

[更新] 将委托添加到类中：

Ext.define('Sencha.view.SearchBar', { 扩展：'Ext.Toolbar'， xtype : '搜索栏', 要求：['Ext.field.Text', 'Ext.field.Search'], 配置：{ ui: '搜索栏', 布局：'vbox'， cls: '大', 项目： [ { xtype: '搜索域', placeHolder: '搜索...' } ] }, 初始化：函数（）{ 这个.on({ 范围：这个，代表：'搜索域'， keyup: 'onSearchFieldKeyUp' }); }, onSearchFieldKeyUp：函数（字段）{ console.log("基类"); console.log(field.getValue()); } });

接下来用我们自己的方法实例化'searchbar'来覆盖默认的onSearchFieldKeyUp

var searchBar = this.nestedList.add({ 停靠：'顶部'， xtype: '搜索栏', 身高：75， id: '搜索栏 ID' });

【问题讨论】：

试试看。是什么阻止您尝试？
我对 Javascript 有点陌生。对不起，如果我错过了明显的。您是说在高度：100 之后添加侦听器：{}？我试试看……
我所描述的不起作用。我包括了所有的源代码。我想我需要直接从 items:[]. 处理搜索字段
要回答您的原始问题，我认为这是 Javascript 问题，整天都在更改某些内容，而没有任何关于问题可能是什么的错误消息。

标签： sencha-touch-2

【解决方案1】：

在您的类中的initialize 函数中添加监听器：

initialize: function() {
    this.on({
        scope: this,
        delegate: 'searchbar',
        keyup: 'onSearchFieldKeyUp'
    });
},

onSearchFieldKeyUp: function(field) {
    console.log(field.getValue());
}

注意我正在使用delegate 属性将侦听器添加到搜索字段组件（通过xtype）；

【讨论】：

我看不出这对 SearchBar 的每个实例有何帮助。也找不到任何 Sencha 文档。这是您的答案中的错字，对吗？我没有遗漏什么吗？ onSearchFieldKeyUp != onSearchKeyFieldKeyUp。本机代码中的委托用于回调。我没有看到在给定实例上设置回调的位置。
对不起，是的；那是一个错字（已修复）。代表也应该是searchbar（你的xtype）。 delegate 在这种情况下意味着它将监听器添加到该委托，它可以是一个 ComponentQuery。
在我的问题中，我在更新时添加了您的更改。我仍然没有得到我应该做的事情，所以我得到了某种授权。我在我感到困惑的地方加粗。有些东西应该覆盖我最初的“基类”方法并将控制权委托给每个实例化？
在onSearchFieldKeyUp 内部触发keyup 事件。 this.fireEvent('keyup', this, field.getValue()); - 然后你可以为你的实例添加一个监听器来处理那个事件。