Coolite Toolkit里的Menu控件和其他的.NET Web控件不一樣，如果只是設計好了Menu或是通過程序初始化菜單項，菜單是不會呈現在界面上的，因為Coolite Toolkit規定Menu控件需要一個容器來做依托，而這個讓Menu依托的控件就是MenuPanel，下面拖拽出的MenuPanel控件所生成的html編碼： Code
<ext:MenuPanel?ID="MenuPanel1"?runat="server"?Height="300"?Title="Menu"?Width="185">
????<Menu>
????????<Items>
????????????<ext:MenuItem?ID="MenuItem1"?runat="server"?Text="Item1">
????????????????<Menu>
????????????????????<ext:Menu?ID="Menu2"?runat="server">
????????????????????????<Items>
????????????????????????????<ext:MenuItem?ID="MenuItem2"?runat="server"?Text="SubItem1">
????????????????????????????</ext:MenuItem>
????????????????????????????<ext:MenuItem?ID="MenuItem3"?runat="server"?Text="SubItem2">
????????????????????????????</ext:MenuItem>
????????????????????????</Items>
????????????????????</ext:Menu>
????????????????</Menu>
????????????</ext:MenuItem>
????????????<ext:MenuItem?ID="MenuItem4"?runat="server"?Text="Item2">
????????????</ext:MenuItem>
????????????<ext:MenuItem?ID="MenuItem5"?runat="server"?Text="Item3">
????????????</ext:MenuItem>
????????????<ext:MenuItem?ID="MenuItem6"?runat="server"?Text="Item4">
????????????</ext:MenuItem>
????????</Items>
????</Menu>
</ext:MenuPanel>
??????從上面可以明顯的看出，MenuPanel里可以放置菜單項(MenuItem)，如果有子菜單，那么子菜單則對應于一個Menu控件，子菜單里的菜單項則又是通過菜單項(MenuItem)來體現。如下是我修改后的一個菜單html編碼： <ext:MenuPanel?runat="server"?Height="300"?Title="帳套管理"?Width="185">
????<Menu?runat="server">
????????<Items>
????????????<ext:MenuItem?runat="server"?Text="新增帳套"?Icon="Add">
????????????????<Listeners>
????????????????????<Click?Handler="JavaScript:window.location.href='#';"?/>
????????????????</Listeners>
????????????</ext:MenuItem>
????????????<ext:MenuItem?runat="server"?Text="維護帳套"?Icon="Cmy"/>
????????????<ext:MenuItem?runat="server"?Text="帳套管理"?Icon="Database">
????????????????<Menu>
????????????????????<ext:Menu?runat="server">
????????????????????????<Items>
????????????????????????????<ext:MenuItem??runat="server"?Text="備份帳套"?Icon="DatabaseSave">
????????????????????????????????<Listeners>
????????????????????????????????????<Click?Handler="JavaScript:window.open('#');"?/>
????????????????????????????????</Listeners>
????????????????????????????</ext:MenuItem>
????????????????????????????<ext:MenuItem?runat="server"?Text="恢復帳套"?Icon="DatabaseGo">
????????????????????????????????<Listeners>
????????????????????????????????????<Click?Handler="JavaScript:window.open('#');"?/>
????????????????????????????????</Listeners>
????????????????????????????</ext:MenuItem>
????????????????????????</Items>
????????????????????</ext:Menu>
????????????????</Menu>
????????????</ext:MenuItem>
????????</Items>
????????<Listeners>
????????????<ItemClick?Fn="onItemClick"?/>
????????</Listeners>
????</Menu>
</ext:MenuPanel>
<script?type="text/javascript">
????function?onItemClick(menuItem)?{
????????Ext.Msg.alert("★操作提示★",?"當前點擊項內容："?+?menuItem.text);
????}
?</script>????????????????????????

??????像Tree、Menu等類似的控件，我個人認為主要就是弄清楚他們內部的層次結構，不管是通過界面設計還是通過直接Code創建他們，最終得到的結果都是一樣，如上菜單顯示效果，同樣可以通過如下程序代碼來創建：
protected?void?Page_Load(object?sender,?EventArgs?e)
{
????if?(!IsPostBack)
????{
????????CreateMenuPanel();
????}
}

private?void?CreateMenuPanel()
{
????MenuPanel?menuPanel?=?new?MenuPanel();
????menuPanel.Title?=?"帳套管理";
????menuPanel.Width?=?new?Unit(180);

????Coolite.Ext.Web.MenuItem?addAccount?=?new?Coolite.Ext.Web.MenuItem("新增帳套");
????addAccount.Icon?=?Icon.Add;
????addAccount.Listeners.Click.Handler?=?"JavaScript:window.location.href='#';";
????
????Coolite.Ext.Web.MenuItem?whAccount?=?new?Coolite.Ext.Web.MenuItem("維護帳套");
????whAccount.Icon=Icon.Cmy;

????Coolite.Ext.Web.MenuItem?accountManage?=?new?Coolite.Ext.Web.MenuItem("帳套管理");
????accountManage.Icon?=?Icon.Database;

????Coolite.Ext.Web.Menu?subMenu?=?new?Coolite.Ext.Web.Menu();

????Coolite.Ext.Web.MenuItem?backMenuItem?=?new?Coolite.Ext.Web.MenuItem("備份帳套");
????backMenuItem.Icon?=?Icon.DatabaseSave;
????backMenuItem.Listeners.Click.Handler?=?"JavaScript:window.open('#')";
????subMenu.Items.Add(backMenuItem);

????Coolite.Ext.Web.MenuItem?reMenuItem?=?new?Coolite.Ext.Web.MenuItem("恢復帳套");
????reMenuItem.Icon?=?Icon.DatabaseGo;
????reMenuItem.Listeners.Click.Handler?=?"JavaScript:window.open('#')";
????subMenu.Items.Add(reMenuItem);

????accountManage.Menu.Add(subMenu);

????menuPanel.Menu.Items.Add(addAccount);
????menuPanel.Menu.Items.Add(whAccount);
????menuPanel.Menu.Items.Add(accountManage);
????menuPanel.Menu.Listeners.ItemClick.Fn?=?"onItemClick";

????accountDiv.Controls.Add(menuPanel);
}
??????本筆記暫時記錄于此，更多高級應用需要大家去挖掘，歡迎各位朋友留下自己的看法和使用心得。

轉載于:https://www.cnblogs.com/AndySong/archive/2009/10/31/1593615.html

總結

以上是生活随笔為你收集整理的Coolite Toolkit学习笔记五：常用控件Menu和MenuPanel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。