ext js 中的侦听器未调用公共函数

Question

我正在尝试从下拉 focus 事件中调用“ControlFocus”方法，但它给了我错误。我知道这是一些范围界定问题，但不确定该怎么做。

所以基本结构如下：

 Ext.define('Panel', {
 extend: 'Ext.Panel.panel',
   
    items: [       
        {
            xtype: 'container', 
            items: []
        },
        {
            xtype: 'fieldcontainer', 
            itemId: 'namefields',          
            items[]  
        },
        {
            xtype: 'fieldcontainer',
            itemId: 'namefieldsRow2',          
            items: []
        },
    
    ],

controlFocus: function(field) {  
     // I want to use this function in several controls
} 
});

实际代码

Ext.define('Panel', {
    extend: 'Ext.Panel.panel',
   
    items: [
        {
            xtype: 'hiddenfield',
            name: 'ID',
            itemId: 'id',
            value: 0
        },
        {
            xtype: 'container',          
            style: 'padding: 18px 0 10px 0;',
            defaults: {
                padding: '0 10 0 0',
                style: 'padding-left: 0;'
            },
            items: [
                {
                    name: 'ExportCode',
                    xtype: 'hiddenfield'
                },
                {
                    fieldLabel: 'BusinessStructure'),
                    name: 'BusinessStructureId',
                    itemId: 'BusinessStructureId',
                    lookupName: 'Structure',
                    xtype: 'combo',
                    id: 'BusinessStructureId',                                     
                    listeners: {                           
                        change: function(field) {                                                   
                        },

                        focus:function(combo, e, opts){                           
                        },
                        // scope: this,     // not working
                        blur: function(field,ev) {                                                  
                           
                        },                          
                    },                        
                },
                {
                    fieldLabel: 'ClientType',
                    name: 'ClientTypeId',
                    itemId: 'ClientTypeId',
                    lookupName: 'ClientType',
                    xtype: 'combo',                   
                },              
            ]
        },
        {
            xtype: 'fieldcontainer',
            itemId: 'namefields',
            layout: 'hbox',
            fieldDefaults: {
                labelCls: 'h-bold'
            },
            cls: 'u-hr-bottom-light',
            items: [
                {
                    fieldLabel:'Name'),
                    labelClsExtra: 'x-form-item-label x-required',
                    name: 'Name',
                    itemId: 'Name',
                    xtype: 'textfield',
                    fieldCls: 'big',
                    width: 650,
                    listeners: { 
                        focus: function(field, ev) {    
                        },
                        blur: function(field,ev) {  
                        },                  
                    }             
                },                   
                {
                    fieldLabel: 'FirstName'),
                    labelClsExtra: 'x-form-item-label x-required',
                    name: 'FirstName',
                    itemId: 'FirstName',
                    xtype: 'textfield',      
                    listeners: { 
                        focus: function(field) {
                        },
                        blur: function(field, ev) {  
                        },                                                  
                    }            
                },               
            ]
        },
        {
            xtype: 'fieldcontainer',
            itemId: 'namefieldsRow2',
            claims: [req.pm, req.au, req.autax],
            layout: 'hbox',
            fieldDefaults: {
                labelCls: 'h-bold'
            },
            cls: 'u-hr-bottom-light',
            items: [
                {
                    fieldLabel: 'ClientTitle',
                    name: 'Title',
                    itemId: 'Title',                  
                    xtype: 'editablecombo',                   
                },
                ]
        },
    
    ],

controlFocus: function(field) {  
     // I want to use this function in several controls
} 
});

Answer 1

您尝试过更简单的方法吗？

focus event of the combobox gives you a reference to the combobox that has launched it, so you can use the standard approach with the listeners配置如下：

// Combobox
{       
    xtype: 'combo', 
    ...
    listeners: {
        focus: function(combo, e, opts){ 
            combo.up("panel").controlFocus(combo); 
        }
    }
}

注意！您发布的代码中肯定有拼写错误或 missing/wrong 括号，因此很难知道您的 controlFocus 方法的范围（容器、面板...）

---编辑---

现在我得到了你的“面板”的代码，我创建了一个 fiddle 来展示它是如何工作的。

Answer 2

focus 事件让您可以直接访问组合。

您可以像这样直接将函数添加到您的侦听器配置中：

listeners: {
    focus: function(combo, event, eOpts){ 
        //Add code here
    }
}

由于您不想直接添加该功能（您在方法的评论中提到您想在多个组件中使用它），您应该查看 view controller.
这样你就可以在视图控制器中使用函数的字符串引用。

这是一个有效的煎茶 fiddle 示例：example

编辑：

因为您不想使用 MVVM：

另一种解决方案是使用像这样的“全局”class：

    Ext.define('Global.class.Listeners', {
        extend: 'Ext.Base',
        statics: {
            controlFocus: function (field) {
                debugger;
                //do some work here
                // I want to use this function in several controls
                Ext.toast('Global static class');
            }
        }
    });

在这种情况下，您可以像这样添加侦听器：

                listeners: {
                    change: function (field) {},
                    
                    focus: Global.class.Listeners.controlFocus,

                    blur: function (field, ev) {
                        //blur logic
                    }
                }

我为你修改了煎茶fiddle：example

哦，顺便说一句：

永远不要覆盖@cfg id -> Alway use the itemId。否则你可能运行重复错误！

Answer 3

错误被抛出，因为你没有在你的侦听器配置中指定scope 属性。如文档中所述，它默认为触发事件的组件，在您的情况下为组合框，有关详细信息，请参阅 docs。

您的解决方案应该是：

// combobox
{       
    xtype: 'combo', 
     ...
    listeners: {
        focus: 'controlFocus',
        scope: this
    }
}

ext js 中的侦听器未调用公共函数

Common function is not being called from listeners in ext js

extjs

focus

dropdown