Coolite Toolkit学习笔记五:常用控件Menu和MenuPanel
生活随笔
收集整理的這篇文章主要介紹了
Coolite Toolkit学习笔记五:常用控件Menu和MenuPanel
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Coolite Toolkit里的Menu控件和其他的.NET Web控件不一樣,如果只是設(shè)計(jì)好了Menu或是通過程序初始化菜單項(xiàng),菜單是不會(huì)呈現(xiàn)在界面上的,因?yàn)镃oolite Toolkit規(guī)定Menu控件需要一個(gè)容器來做依托,而這個(gè)讓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里可以放置菜單項(xiàng)(MenuItem),如果有子菜單,那么子菜單則對(duì)應(yīng)于一個(gè)Menu控件,子菜單里的菜單項(xiàng)則又是通過菜單項(xiàng)(MenuItem)來體現(xiàn)。如下是我修改后的一個(gè)菜單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="維護(hù)帳套"?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="恢復(fù)帳套"?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("★操作提示★",?"當(dāng)前點(diǎn)擊項(xiàng)內(nèi)容:"?+?menuItem.text);
????}
?</script>????????????????????????
??????像Tree、Menu等類似的控件,我個(gè)人認(rèn)為主要就是弄清楚他們內(nèi)部的層次結(jié)構(gòu),不管是通過界面設(shè)計(jì)還是通過直接Code創(chuàng)建他們,最終得到的結(jié)果都是一樣,如上菜單顯示效果,同樣可以通過如下程序代碼來創(chuàng)建:
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("維護(hù)帳套");
????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("恢復(fù)帳套");
????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);
}
??????本筆記暫時(shí)記錄于此,更多高級(jí)應(yīng)用需要大家去挖掘,歡迎各位朋友留下自己的看法和使用心得。
<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里可以放置菜單項(xiàng)(MenuItem),如果有子菜單,那么子菜單則對(duì)應(yīng)于一個(gè)Menu控件,子菜單里的菜單項(xiàng)則又是通過菜單項(xiàng)(MenuItem)來體現(xiàn)。如下是我修改后的一個(gè)菜單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="維護(hù)帳套"?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="恢復(fù)帳套"?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("★操作提示★",?"當(dāng)前點(diǎn)擊項(xiàng)內(nèi)容:"?+?menuItem.text);
????}
?</script>????????????????????????
??????像Tree、Menu等類似的控件,我個(gè)人認(rèn)為主要就是弄清楚他們內(nèi)部的層次結(jié)構(gòu),不管是通過界面設(shè)計(jì)還是通過直接Code創(chuàng)建他們,最終得到的結(jié)果都是一樣,如上菜單顯示效果,同樣可以通過如下程序代碼來創(chuàng)建:
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("維護(hù)帳套");
????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("恢復(fù)帳套");
????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);
}
??????本筆記暫時(shí)記錄于此,更多高級(jí)應(yīng)用需要大家去挖掘,歡迎各位朋友留下自己的看法和使用心得。
轉(zhuǎn)載于:https://www.cnblogs.com/AndySong/archive/2009/10/31/1593615.html
總結(jié)
以上是生活随笔為你收集整理的Coolite Toolkit学习笔记五:常用控件Menu和MenuPanel的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 不要祈祷生活的舒适下一句是什么啊?
- 下一篇: jQuery的Tab插件 Tabtast