[CLOSED] Disable a MenuItem when button selected

[cwolcott]

I have created a Button with a Menu. The menu items are added in the behind code and all of that works:

...
<TopBar>
   <ext:Toolbar runat="server"
      <Items>
         <ext:Button runat="server" Icon="Database" >
            <Menu>
               <ext:Menu ID="CfdbOptionsMenu" runat="server"
               <%-- MenuItems dynamically create in behind code --%>
            </Menu>
         </ext:Button>
         <ext:Label ID="CfdbVersionTitle" runat="server" />
      </Items>
   </ext:Toolbar>
</TopBar>
...

Behind Code ...

protected void Page_Load(object sender, EventArgs e)
{
   if (!X.IsAjaxRequest)
   {
      CFVDataContext dc = new CFVDataContext;
      
      // Retrieve all available versions that can be selected.
      var q = from c in dc.CfdbVersions
                 where c.IsActive == true
                 orderby c.Order descending
                 select c;

      // Create the menu items
      foreach (var c in q)
      {
         Ext.Net.MenuItems item = new Ext.Net.MenuItems()
         {
            Text = c.Description,
            Icon = Icon.Database
         };
         item.addTo(CfdbOptionsMenu);
      }
   }
}

What I would like to do is whenever the button is selected to display the menuItems I need to iterate through the menu items and disable the item if the menuItem.Text == CfdbVersionTitle.Text. This could be done on the client side. What listener should I use and what is the best way to iterate through the menuitems. I need to do it each time the button displays the menuItems because the title might have changed since the last time the menuitems were shown.

[Daniil]

Hi,

There are four Buttons event related to its menu.
http://docs.sencha.com/ext-js/4-1/#!...event-menuhide
http://docs.sencha.com/ext-js/4-1/#!...event-menushow
http://docs.sencha.com/ext-js/4-1/#!...menutriggerout
http://docs.sencha.com/ext-js/4-1/#!...enutriggerover

I think you could use the "menushow" one.

[cwolcott]

Thanks, everything worked. You may close the thread. I added the following:

<%-- ADDED CODE --%>
<ext:XScript runat="server">
   <script type="text/javascript">
      var disableCurrentCfdb = function(button, menu, e) {
         menu.items.each (function(item) {
            item.setDisabled(item.text == #{CfdbVersionTitle}.text);
         });
      };
   </script>
</ext:XScript>
...
<TopBar>
   <ext:Toolbar runat="server"
      <Items>
         <ext:Button runat="server" Icon="Database" >
            <Menu>
               <ext:Menu ID="CfdbOptionsMenu" runat="server"
               <%-- MenuItems dynamically create in behind code --%>
            </Menu>
            <%-- ADDED LISTENER --%>
            <Listeners>
               <MenuShow Fn="disableCurrentCfdb" />
            <Listeners>
         </ext:Button>
         <ext:Label ID="CfdbVersionTitle" runat="server" />
      </Items>
   </ext:Toolbar>
</TopBar>
...

Behind Code ...

protected void Page_Load(object sender, EventArgs e)
{
   if (!X.IsAjaxRequest)
   {
      CFVDataContext dc = new CFVDataContext;
      
      // Retrieve all available versions that can be selected.
      var q = from c in dc.CfdbVersions
                 where c.IsActive == true
                 orderby c.Order descending
                 select c;

      // Create the menu items
      foreach (var c in q)
      {
         Ext.Net.MenuItems item = new Ext.Net.MenuItems()
         {
            Text = c.Description,
            Icon = Icon.Database
         };
         item.addTo(CfdbOptionsMenu);
      }
   }
}