0

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

如何将搜索栏添加到嵌套列表？

如何在创建时向此类添加/设置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'

        });
4

1 回答 1

0

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

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

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

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

于 2012-05-04T23:04:38.857 回答