Coolite Toolkit裡的Menu控件和其他的.NET Web控件不一樣，如果隻是設計好了Menu或是通過程式初始化菜單項，菜單是不會呈現在界面上的，因為Coolite Toolkit規定Menu控件需要一個容器來做依托，而這個讓Menu依托的控件就是MenuPanel，下面拖拽出的MenuPanel控件所生成的html編碼：
<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">
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item2">
<ext:MenuItem ID="MenuItem5" runat="server" Text="Item3">
<ext:MenuItem ID="MenuItem6" runat="server" Text="Item4">
</Items>
</Menu>
</ext:MenuPanel>
從上面可以明顯的看出，MenuPanel裡可以放置菜單項(MenuItem)，如果有子菜單，那麼子菜單則對應于一個Menu控件，子菜單裡的菜單項則又是通過菜單項(MenuItem)來展現。如下是我修改後的一個菜單html編碼：
<ext:MenuPanel runat="server" Height="300" Title="帳套管理" Width="185">
<Menu runat="server">
<ext:MenuItem runat="server" Text="新增帳套" Icon="Add">
<Listeners>
<Click Handler="JavaScript:window.location.href='#';" />
</Listeners>
<ext:MenuItem runat="server" Text="維護帳套" Icon="Cmy"/>
<ext:MenuItem runat="server" Text="帳套管理" Icon="Database">
<ext:Menu runat="server">
<ext:MenuItem runat="server" Text="備份帳套" Icon="DatabaseSave">
<Listeners>
<Click Handler="JavaScript:window.open('#');" />
</Listeners>
<ext:MenuItem runat="server" Text="恢複帳套" Icon="DatabaseGo">
<Listeners>
<ItemClick Fn="onItemClick" />
</Listeners>
<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);
本筆記暫時記錄于此，更多進階應用需要大家去挖掘，歡迎各位朋友留下自己的看法和使用心得。
本文轉自 beniao 51CTO部落格，原文連結：http://blog.51cto.com/beniao/240069，如需轉載請自行聯系原作者