事件的ExtJS控制器选择器

ExtJS Controller Selector for Events

本文关键字：选择器 控制器 ExtJS 事件      更新时间：2023-09-26

我有一个视图和一个控制器。该视图的按钮下有菜单，当单击时，控制器将处理哪些项目。如果我放置类选择器，控制器永远不会捕捉到该事件，但如果我移除类选择器，它就会工作。

看看我的代码。

查看

Ext.create('Ext.Button', {
    text: 'Add Tab',
    cls: 'button',
    menu: Ext.create('Ext.menu.Menu', {
        cls: 'addMenu',
        items: [{
            text: 'One'
        }, {
            text: 'Two'
        }]
    })
});

和控制器

Ext.define('MyApp.controller.TabController', {
    extend : 'Ext.app.Controller',
    init : function() {
        this.control({
            'menu[cls=addMenu]' : {
                'click' : this.addTab
            }
        });
    },
    addTab : function(a, b, c, d) {
        console.log(a, b, c, d);
    }
});

我在这里做错了什么？

也许您应该将类名包装成这样的引号

'menu[cls="addMenu"]'

我用另一种方法解决了我的问题。

查看

Ext.create('Ext.Button', {
    text: 'Add Tab',
    cls: 'button addTab',
    menu: Ext.create('Ext.menu.Menu', {
        cls: 'addMenu',
        items: [{
            text: 'One'
        }, {
            text: 'Two'
        }]
    })
});

和控制器

Ext.define('MyApp.controller.TabController', {
    extend : 'Ext.app.Controller',
    init : function() {
        this.control({
            'button[cls=button addTab] > menu' : {
                'click' : this.addTab
            }
        });
    },
    addTab : function(a, b, c, d) {
        console.log(a, b, c, d);
    }
});

这太棒了！

通常，'='运算符更适合于CSS类以外的对象属性，而'~='运算符最适合于包含空格分隔的CSS类列表的属性。

相关文章：