在extjs中,没有从侦听器调用公共函数

yx2lnoni  于 2022-09-26  发布在  其他
关注(0)|答案(3)|浏览(164)

我试图从下拉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
} 
});
nuypyhwy

nuypyhwy1#

你尝试过更简单的方法吗?
组合框的焦点事件为您提供了对启动它的组合框的引用,因此您可以对侦听器配置使用标准方法,如下所示:

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

笔记您发布的代码中肯定有错别字或缺少/错误的括号,因此很难知道controlFocus方法的范围(容器、面板…)
---编辑---
现在我得到了你的“面板”的代码,我创建了一个小提琴,显示它是如何工作的。

y0u0uwnf

y0u0uwnf2#

焦点事件使您可以直接访问组合框。
您只需将函数直接添加到侦听器配置中,如下所示:

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

由于您不想直接添加函数(您在方法的注解中提到过要在几个组件中使用它),因此应该检查view controller
这样,您就可以在视图控制器中只对函数使用String引用。
下面是一个有效的sencha提琴示例:示例
编辑:
由于您不想使用MVVM:
另一个解决方案是使用“全局”类,其中包含如下静态:

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
                    }
                }

我为你修改了我的僧伽提琴:示例
哦,顺便说一句:
永远不要覆盖@cfg id->始终使用itemId。否则,您可能会遇到重复错误!

lyfkaqu1

lyfkaqu13#

由于没有在侦听器配置中指定scope属性,因此引发了该错误。如文档中所述,它默认为触发事件的组件,在您的示例中是组合框,有关详细信息,请参阅文档。
您的解决方案应该是:

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

相关问题