0

我通过扩展创建了一个视图，Ext.container.Container并给了它一个alias widget.myCustomView. 因为我在不同的地方使用它。

视图像往常一样 Ext 表单组件，如textfield,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()因为据我所知，不可能停止使用一个由分机提供。然后，您必须观看remove事件以删除已添加到子字段和容器的侦听器。

于 2013-05-19T16:22:10.980 回答