PDA

View Full Version : [CLOSED] Disable a MenuItem when button selected



cwolcott
Jun 13, 2012, 5:31 PM
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
Jun 13, 2012, 7:03 PM
Hi,

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

I think you could use the "menushow" one.

cwolcott
Jun 14, 2012, 3:19 PM
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);
}
}
}