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', 関数(フィールド) {
                  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: 「検索...」
            }
        ]
    }、
    初期化: 関数() {
        this.on({
            範囲：これ、
            デリゲート: '検索フィールド',
            キーアップ: 'onSearchFieldKeyUp'
        });
    }、
    onSearchFieldKeyUp: 関数(フィールド) {
        console.log("基本クラス");
        console.log(field.getValue());
    }
});

次に、デフォルトのonSearchFieldKeyUpをオーバーライドする独自のメソッドで「searchbar」をインスタンス化します

var searchBar = this.nestedList.add({
            ドッキング: 'トップ',
            xtype: '検索バー',
            身長: 75,
            id: 'searchbarId'

        });
4

1 に答える 1

0

initializeクラスの関数内にリスナーを追加します。

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

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

プロパティを使用しdelegateてリスナーを searchfield コンポーネントに ( 経由でxtype) 追加していることに注意してください。

于 2012-05-04T23:04:38.857 に答える