javascript - 事件的 ExtJS 控制器选择器

Question

我有一个视图和一个控制器。该视图在按钮下有菜单，单击时将由控制器处理哪些项目。如果我放置类选择器，控制器永远不会捕获该事件，但如果我删除类选择器，它会起作用。

看看我的代码。

看法

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

我在这里做错了什么？

Answer 1

也许您应该将类​​名包含在引号中，例如

'menu[cls="addMenu"]'

Answer 2

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

看法

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

这很好用！

Answer 3

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