Question

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

How to add a Search Bar to a Nested List?

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

Ext.define('Sencha.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Text', 'Ext.field.Search'],

    config: {
        ui: 'searchbar',
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'searchfield',
                placeHolder: 'Search...',
                listeners: {
                    scope: this,
                    keyup: function(field) {
                        console.log(field.getValue());
                    }
                }
            }
        ]
    }
});

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

var searchBar = nestedList.add({
    docked: 'top',
    xtype: 'searchbar',
    height: 100
});

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

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

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

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

Ext.define('Sencha.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Text', 'Ext.field.Search'],
    config: {
        ui: 'searchbar',
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'searchfield',
                placeHolder: 'Search...'
            }
        ]
    },
    initialize: function() {
        this.on({
            scope: this,
            delegate: 'searchfield',
            keyup: 'onSearchFieldKeyUp'
        });
    },
    onSearchFieldKeyUp: function(field) {
        console.log("Base Class");
        console.log(field.getValue());
    }
});

接下来使用我们自己的方法实例化“搜索栏”以覆盖默认 onSearchFieldKeyUp

 var searchBar = this.nestedList.add({
            docked: 'top',
            xtype: 'searchbar',
            height: 75,
            id: 'searchbarId'

        });

Answer 1

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

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

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

注意我正在使用delegate属性将侦听器添加到searchfield组件上（通过xtype）;

在对象创建时添加searchfield keyup侦听器？

1 个答案: