extjs中的侦听器没有调用公共函数

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

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

组合框的焦点事件为您提供了启动它的组合框的参考，因此您可以使用标准方法和侦听器配置，如下所示：

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

注意！你发布的代码中肯定有拼写错误或括号缺失/错误，所以很难知道你的controlFocus方法的范围(容器、面板…(

---编辑---

现在我得到了你的"；"面板"；我制作了一把小提琴，展示了它的工作原理。

Answer 2

焦点事件使您可以直接访问组合。

您可以直接将函数添加到侦听器配置中，如下所示：

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

由于您不想直接添加函数(您在方法的注释中提到您想在多个组件中使用它(，因此您应该签出视图控制器
这样，您就可以在视图控制器中只使用一个String引用。

下面是一个正在工作的sencha fiddle示例：示例

编辑：

由于您不想使用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
}
}

我为你修改了我的sencha小提琴：示例

哦，顺便说一句：

永远不要覆盖@cfg id->始终使用itemId。否则，您可能会遇到重复的错误！

Answer 3

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

您的解决方案应该是：

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