PDA

View Full Version : [CLOSED] Set content in MenuItem using code behind



speedstepmem4
Oct 25, 2013, 9:42 AM
Hi,

MenuItem content is not displayed in v2.x?
Please check the following sample


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
itemSetting.Html = "<b>Setting</b>";
itemSetting.Html += "<br/><div class='menu-desc'>Click setting to change the settings</div>";
itemSetting.OnClientClick = "alert('setting ok');";

logout.Html = "<b>Logout</b>";
logout.Html += "<br/><div class='menu-desc'>Click logout to close the application</div>";
logout.OnClientClick = "alert('logout ok');";

}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.x-menu-item
{
white-space: normal !important;
}
.active-menu
{
background-color: #F7ECC7;
border-radius: 5px;
}
.x-menu-horizontal .x-btn-tl, .x-menu-horizontal .x-btn-tr, .x-menu-horizontal .x-btn-tc, .x-menu-horizontal .x-btn-ml, .x-menu-horizontal .x-btn-mr, .x-menu-horizontal .x-btn-mc, .x-menu-horizontal .x-btn-bl, .x-menu-horizontal .x-btn-br, .x-menu-horizontal .x-btn-bc
{
background-image: none;
}
.x-menu-horizontal
{
padding-right: 10px;
}
.x-menu-horizontal button
{
font-size: 9pt !important;
}
.x-menu-horizontal .x-btn-mr
{
width: 15px;
height: 15px;
}
.x-menu-horizontal .x-btn-arrow
{
padding: 0px 0px 0px 0px !important;
}
.x-menu
{
background-image: none;
background-color: #FFFFFF;
}
.menu-desc
{
font-family: Arial;
font-size: 8pt;
}
#itemSetting, #logout
{
background-position: 4px center !important;
height: 56px;
}

.x-tab-panel-header
{
border: 0px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ID="rm" Namespace="">
</ext:ResourceManager>
<div align="center">
<ext:Button runat="server" ID="btnMySetting" Text="Show Menu">
<Menu>
<ext:Menu ID="mnuMySetting" runat="server" Width="200">
<Items>
<ext:MenuItem ID="itemSetting" runat="server" ActiveCls="active-menu" />
<ext:MenuSeparator StyleSpec="height: 2px;background-color: #C6C6C6;" />
<ext:MenuItem ID="logout" runat="server" ActiveCls="active-menu" />
</Items>
<Listeners>
<AfterRender Handler="onAfterRender(this, btnMySetting);" />
</Listeners>
</ext:Menu>
</Menu>
<Listeners>
<AfterRender Handler="onAfterButtonRender(this);" />
</Listeners>
</ext:Button>
</div>
</form>
<script type="text/javascript">
var onAfterButtonRender = function (button) {
button.el.on(
'mouseleave',
function () {
if (!button.lockHideMenu && !button.itemVisit) {
button.hideMenu();
}
},
this,
{
delay: 2100
});
button.el.on(
'mouseenter',
function () {
if (!button.hasVisibleMenu()) {
button.showMenu();
button.lockHideMenu = true;
button.itemVisit = false;
Ext.Function.defer(function () { button.lockHideMenu = false; }, 2000);
}
});
};

var onAfterRender = function (menu, button) {
menu.el.on(
'mouseleave',
function () {
if (!button.lockHideMenu) {
button.hideMenu();
}
},
this,
{
delay: 250
});
menu.el.on(
'mouseenter',
function () {
button.lockHideMenu = true;
button.itemVisit = true;
Ext.Function.defer(function () { button.lockHideMenu = false; }, 300);
});
};
</script>
</body>
</html>

Daniil
Oct 25, 2013, 1:49 PM
Hi @speedstepmem4,

Please use a MenuItem's Text property instead of the Html one.

speedstepmem4
Oct 28, 2013, 8:45 AM
Hi @speedstepmem4,

Please use a MenuItem's Text property instead of the Html one.

If I have used Text property text is not wrapped properly. Please see my screen shot as attached. Earlier version it was working fine.

Please give your suggestion.

Daniil
Oct 28, 2013, 2:18 PM
This CSS rule can help.

.x-menu-item-link {
line-height: 16px;
}