如何在加载时根据条件隐藏Ext菜单中的项目

时间:2017-06-01 17:58:04

标签: javascript jquery extjs menu

我试图在条件中隐藏Ext.menu.Menu中的项目但是,我找不到菜单的触发器加载事件。你能给我建议吗?

int setLED(int line, int collumn, enum command_e cmd)
{
    return (line<<5)|(collumn<<2)|cmd;
}

示例:如果lala = 1,则仅在菜单中显示复选框。 谢谢。

4 个答案:

答案 0 :(得分:3)

您可以在菜单项上使用afterRender侦听器:

{
    text: 'Choose a Date',
    iconCls: 'calendar',
    menu: dateMenu // <-- condition 2
    listeners: {
        afterRender: function() {
            if (lala == 2)
                this.hide();
        }
    }
}

答案 1 :(得分:1)

你可以这样做

//var lala //= 1 2 or 3

var menu = Ext.create('Ext.menu.Menu', {
        id: 'mainMenu',
        items: [

            {
                text: 'I like Ext',
                checked: true,       // condition 1
                hidden : lala == 1 ? true:false,
                checkHandler: onItemCheck
            }, {
               text: 'Choose a Date',
               iconCls: 'calendar',
               hidden : lala == 2 ? true:false,
               menu: dateMenu // <-- condition 2
           },{
               text: 'Choose a Color',
               hidden : lala == 3 ? true:false,
               menu: colorMenu // <-- condition 3
           }
        ]
    });

答案 2 :(得分:1)

从您的代码lala开始,我认为,您在创建菜单时知道var menuItems = []; if (lala === 1) { menuItems.push({ text: 'I like Ext', checked: true, // condition 1 checkHandler: onItemCheck }); } else if (lala === 2) { menuItems.push({ text: 'Choose a Date', iconCls: 'calendar', menu: dateMenu // <-- condition 2 }); } else if (lala === 3) { menuItems.push({ text: 'Choose a Color', menu: colorMenu // <-- condition 3 }) } var menu = Ext.create('Ext.menu.Menu', { id: 'mainMenu', items: menuItems }); 的价值。您需要做的就是设置您想要的菜单项。

有些事情:

// Set all menu items in menu
var menu = Ext.create('Ext.menu.Menu', {
    id: 'mainMenu',
    items: [
        {
            text: 'I like Ext',
            itemId: 'lala1', // Item ID to find the component on the fly
            hidden: lala !== 1, // if lala is already initialized
            //hidden: true, // if lala is not initialized
            checked: true,       // condition 1
            checkHandler: onItemCheck
        }, 
        {
            text: 'Choose a Date',
            itemId: 'lala2', // Item ID to find the component on the fly
            hidden: lala !== 2, // If lala is already initialized
            //hidden: true, // if lala is not initialized
            iconCls: 'calendar',
            menu: dateMenu // <-- condition 2
        },
        {
            text: 'Choose a Color',
            itemId: 'lala3', // Item ID to find the component on the fly
            hidden: lala !== 3, // If lala is already initialized
            //hidden: true, // if lala is not initialized
            menu: colorMenu // <-- condition 3
        }
    ]
});

// Your store load (or any other event of your choosing)
yourStore.on({
    load: function() {
        var newLala = getLalaSomehow(); // Get lala the way you do

        // Get menu items by the item IDs set previously
        var menuItemLala1 = menu.down('#lala1');
        var menuItemLala2 = menu.down('#lala2');
        var menuItemLala3 = menu.down('#lala3');

        // Show/hide menu items based on a condition
        menuItemLala1.setVisible(newLala === 1); // Only show when lala is 1
        menuItemLala2.setVisible(newLala === 2); // Only show when lala is 2
        menuItemLala3.setVisible(newLala === 3); // Only show when lala is 3
    }
});

你一直在谈论'加载'。您的示例菜单没有任何商店,因此实际上并未加载。

但是,如果您需要动态更改菜单,当某些商店加载(或某些其他事件被触发)时,您可以这样做:

true

在上面的示例中,我使用setVisible方法,该方法在传递的参数为false时显示组件并隐藏它,如果它是cv2. fastNlMeansDenoisingColored

答案 3 :(得分:0)

我已经发现正确的方法是在Ext Menu构建之前触发。或者在运行一次后投降。