如何隱藏在擴展菜單基於條件時加載

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構建之前觸發。否則，運行一次即可。