0

拡張Ext.container.Containerしてビューを作成し、alias widget.myCustomView. いろいろなところに使っているので。

textfield、などの通常の Ext フォーム コンポーネントとしてのビュー。次のようにdataview使用して、このビューを他のビューに追加xtypeします。

{
    xtype: 'myCustomView',
    itemId: 'myCustomView'
}

changeここで、イベント ハンドラーを追加して、いずれかのコンポーネントchangeが起動されたchange場合にビューのイベントを起動できるようにしmyCustomます。要するに、このようなことをしてください。

{
    xtype: 'myCustomView',
    itemId: 'myCustomView',
    listeners: {
        'change' : function(viewObj, eOpts) {
             //do something
         }
    }
}

どうやってするの？

4

1 に答える 1

1

このメソッドを使用して、子フィールドからイベントをrelayEvents()中継します。change

これを行う基本的なコードを次に示します。

Ext.define('My.Container', {
    extend: 'Ext.Container'

    ,layout: 'form'

    ,initComponent: function() {
        this.callParent(arguments);

        // i want to support nested containers
        this.parseContainerItems(this);
    }

    ,onItemAdded: function(item) {
        if (item instanceof Ext.Container) {
            this.parseContainerItems(item);
        } else if (item instanceof Ext.form.field.Base) {
            this.relayEvents(item, ['change']);
        }
    }

    ,parseContainerItems: function(ct) {
        if (ct.items) {
            ct.items.each(this.onItemAdded, this);
        }
    }
});

使用例:

Ext.create('My.Container', {
    renderTo: 'ct' // render to a test div
    ,height: 200
    ,width: 200

    ,items: [{
        xtype: 'textfield', name: 'foo', fieldLabel: 'Foo'
    },{
        xtype: 'container'
        ,items: [{
            xtype: 'checkbox', name: 'bar', fieldLabel: 'Bar'
        }]
    }]

    ,listeners: {
        change: function(item, newValue, oldValue) {
            console.log(Ext.String.format('Value of item {0} changed from {1} to {2}', item.name, oldValue, newValue));
        }
    }
});

もっと遠く行く...

前述したように、構成によってコンテナーに追加されるフィールドのみをサポートするため、私の実装は非常に初歩的なものです。そのコンポーネントを柔軟にしたい場合は、コンポーネントの作成後に追加されるフィールドを処理する必要があります。

そのためにaddは、コンテナの作成後に追加されたフィールドから中継するコンテナのイベントを監視する必要があります。ドキュメントによると、このイベントは子コンテナーからバブルしますが、私のテストではそうではありません:-(したがって、(修正されるまでは?)add子コンテナーのイベントも監視する必要があります。

parseContainerItems()メソッドの更新されたコードは次のとおりです。

parseContainerItems: function(ct) {
    ct.on('add', function(me, item) {
        this.onItemAdded(item);
    }, this);

    if (ct.items) {
        ct.items.each(this.onItemAdded, this);
    }
}

フィールドを動的に削除する可能性もサポートしたい場合は、それがうまくいかないときです...relayEvents()私の知る限り、イベントのリレーを停止することはできないため、独自のバージョンを実装する必要がありますExtによって提供されるもの。次に、イベントを監視して、remove子フィールドとコンテナーに追加したリスナーを削除する必要があります。

于 2013-05-19T16:22:10.980 に答える