如何隐藏在扩展菜单基于条件时加载

Question

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

//var lala //= 1 2 or 3 

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

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

例如：只显示复选框在菜单中，如果拉拉= 1 谢谢。

Answer 1

您可以使用afterRender监听器上的菜单项：

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

Answer 2

你可以这样做

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

Answer 3

从您的代码//var lala //= 1 2 or 3，我相信，在创建时知道的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 
    } 
}); 

在上面的例子中，我我使用的是setVisible方法，当传入的参数是true时，它显示组件，并隐藏它，如果它是false。

Answer 4

我已经找到了正确的方法是在Ext Menu构建之前触发。否则，运行一次即可。