extjs4 - ExtJS 4 - MVC 中项目的控制事件

Question

我在 MVC 中有一个带有视图类的应用程序：

Ext.define('a.view.Mainmenu' ,{
    extend: 'Ext.menu.Menu',
    alias: 'widget.mainmenu',
    text: 'Menu',
    items: [
    {
        xtype: 'menucheckitem',
        id: 'mci1',
        text: 'a'
    },
    {
        xtype: 'menucheckitem',
        id: 'mci2',
        text: 'b'
    }]
});

如何控制控制器中 menucheckitems 的点击事件？我想检查 menucheckitems 是否被选中。我在控制器的init函数中尝试了一些东西，但是出现了错误（item.down("mci1") is null）：

...
init: function() {
    this.control({
        'mainmenu': {
            click: function(item) {
                if (item.down('mci1').checked == true) {
                    ...
                }
                if (item.down('mci2').checked == true) {
                    ...
                }
            }
        }
    });
}

我怎么能做对？

Answer 1

@林戈，

根据 Sencha 文档 (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.menu.CheckItem-, menuitem 或 menucheckitem 都没有可用的 down() 方法事件检查更改）。

所以，这就是为什么这些不起作用。

menucheckitem 的 xtype 有一个事件，称为“checkchange”。此事件使以下参数可用于您的函数：

• this (Ext.menu.CheckItem) <= 被选中/取消选中的实际 menucheckitem（所以 mci1 或 mci2 取决于用户点击的那个）
• checked (Boolean) <= 如果更改将 menucheckitem 设置为选中，则为 true，如果未选中，则为 false。

因此，这只需要您执行以下操作：

...
init: function() {
this.control({
    'mainmenu menucheckitem': {
        checkchange: function(item, checked) {
            if (checked) {
                if(item.id == 'mci1'){
                  ...
                }
            }else{
                ...
            }
        }
    }
  });
}

Answer 2

item 参数已经是您的菜单项。您不必向下查询。

所以它会是：

if(item.checked && item.getId() == 'mci1'){
...
}