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类列表的属性。

用于事件的ExtJS控制器选择器

3 个答案: