Question

组件定义：

 public int SendCase(class1 obecttype1, class2 obj2, class3 obj3)

A＆＃39; Ext.define('Retroplanner.view.dimension.DimensionMapping', { alias: 'widget.dimensionMapping', extend: 'Ext.form.Panel', ... items: [{ xtype: 'combo' }, ... ]＆＃39;子项的处理程序必须创建一个窗口小部件，并将此窗口小部件添加到其父项的select数组中。

在这个子项目的内部，它选择＆＃39;处理程序，我可以通过一些搜索技术找到它的父级。但是如果可能的话我想避免它。我也没有父母的参考变量。

更好的方法是 - 在父级中创建函数，并以某种方式将其附加到子项：

items

问题，如何附加Ext.define('Retroplanner.view.dimension.DimensionMapping', { ... onSiRemoteCombo: function(cmb, rec, idx) { alert("select handler"); var newItem = Ext.widget('somexType'); this.items.add(newItem); }？

我在这里找到了类似的解决方案：How to create listener for child component's custom event

首先，它对我不起作用。我可以给出一个我试图使用的完整示例。 2，我想通过最常见的方式/在公共场所创建项目，而不是通过initComponent方法。我希望有类似的东西：

onSiRemoteCombo

但我得到一个例外：

Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
afterRender: function() {
    var me = this;
    //exception here
    //Uncaught TypeError: Cannot read property 'on' of undefined
    me.items[0].on('select', onSiRemoteCombo, this);
},

items: [{
       xtype: 'combo'
   }, ...
],

onSiRemoteCombo: function(cmb, rec, idx) {
     alert("Ttt");
     var dimensionMapping = Ext.widget('propGrid');
     this.getParent().add(dimensionMapping);
}

而且，在每次渲染后附加一个监听器，真的是个坏主意。

此类用例是否有最佳做法？理想情况下，如果它可以在不同版本的Ext JS中工作，至少在5.x和6.x

中

在子级中附加处理程序并访问其父级？孩子不应该依赖父母。只有父母应该知道，该做什么。

Answer 1

解决此问题的一种方法是将组合项目组件初始化包装到表单initComponent方法中。这样，在为组合设置侦听器时，可以使用this.formMethod来引用表单方法。这是一些代码：

Ext.define('Fiddle.view.FirstForm', {
    extend: 'Ext.form.Panel',
    bodyPadding: 15,

    initComponent: function () {
        Ext.apply(this, {
            items: [{
                xtype: 'combo',
                fieldLabel: 'First Combo',
                store: ['first', 'second'],
                listeners: {
                    'select': this.onComboSelect
                }
            }]
        });

        this.callParent();
    },

    onComboSelect: function () {
        alert('I am a first form method');
    }
});

第二种方法是在组合上使用字符串侦听器，并在表单上将defaultListenerScope设置为true。这样，监听器功能将resolved形式的方法。再一次，一些代码：

Ext.define('Fiddle.view.SecondForm', {
    extend: 'Ext.form.Panel',
    bodyPadding: 15,
    defaultListenerScope: true,

    items: [{
        xtype: 'combo',
        fieldLabel: 'Second Combo',
        store: ['first', 'second'],
        listeners: {
            'select': 'onComboSelect'
        }
    }],

    onComboSelect: function () {
        alert('I am a second form method');
    }
});

这是两种方法的工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/27un

Ext Js将父容器中的事件处理程序附加到其子项

1 个答案: