Coolite Toolkit學習筆記五：常用控件Menu和MenuPanel

?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">

????????????????????????????</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);
}

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

本文轉自 beniao 51CTO博客，原文鏈接：http://blog.51cto.com/beniao/240069，如需轉載請自行聯系原作者

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/279607.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/279607.shtml
英文地址，請注明出處：http://en.pswp.cn/news/279607.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！