當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ExtTabMenu 控件

發布時間：2025/3/15 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了 ExtTabMenu 控件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

由于項目的需要，開發了一個稱之為TabMenu的控件，原理比較簡單，主要使用到了ExtJS的TapPanel，Toolbar，Menu，特點是容易使用，并且數據源采用ASP.NET的SiteMap文件。

簡單的介紹一下我的做法：

1. 先創建一個TabPanel，

2. 然后再添加相應的TabItem，每個TabItem都有一個對應的工具欄，

3. 根據需要在每個工具欄上添加按鈕和菜單。

如果你有興趣，可以下載源代碼進行參考。下面我只介紹一下TabMenu的使用方法。

第一步，創建適合TabMenu顯示的sitemap，我用的sitemap示例如下：

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ><siteMapNode title="水環境"><siteMapNode title="基礎信息"><siteMapNode url="~/11.aspx" title="水功能區劃" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/12.aspx" title="飲用水源保護區" icon="~/examples/menu/list-items.gif"><siteMapNode url="~/121.aspx" title="測試" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/122.aspx" title="測試2" target="_blank"/></siteMapNode><siteMapNode url="~/13.aspx" title="水質監測斷面" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/14.aspx" title="污水處理廠" icon="~/examples/menu/list-items.gif"/></siteMapNode><siteMapNode title="監測信息分析"><siteMapNode url="~/21.aspx" title="水功能區劃" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/22.aspx" title="飲用水源保護區" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/23.aspx" title="水質監測點"/><siteMapNode url="~/24.aspx" title="排污口監測點" icon="~/examples/menu/list-items.gif"/></siteMapNode><siteMapNode title="環境質量"><siteMapNode url="~/31.aspx" title="監測點" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/32.aspx" title="湖庫水質監測點" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/33.aspx" title="排污口監測點" icon="~/examples/menu/list-items.gif"/><siteMapNode url="~/34.aspx" title="海域功能區劃" icon="~/examples/menu/list-items.gif"/></siteMapNode></siteMapNode> </siteMap>

第二步，在頁面上創建SiteMapDataSource，例如：

<asp:SiteMapDataSource ID="xmlSiteMapDataSource" runat="server" ShowStartingNode="false"/>

第三步，注冊并使用TabMenu：

注冊TabMenu：

<%@ Register Namespace="Controls" TagPrefix="ux" %>

使用TabMenu：

<ux:ExtTabMenu ID="tabmenu1" runat="server" CssClass="ext-tab-menu" DataSourceID="xmlSiteMapDataSource" />

我的測試頁面的完整的源代碼如下：

<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Register Namespace="Controls" TagPrefix="ux" %> <script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Tab Menu Test</title><link href="/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="/extjs/source/core/Ext.js" type="text/javascript"></script><script src="/extjs/source/adapter/ext-base.js" type="text/javascript"></script><script src="/extjs/ext-all-debug.js" type="text/javascript"></script><script type="text/javascript">Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';</script> </head> <body><form id="form1" runat="server"><ux:ExtTabMenu ID="tabmenu1" runat="server" CssClass="ext-tab-menu" DataSourceID="xmlSiteMapDataSource" /><asp:SiteMapDataSource ID="xmlSiteMapDataSource" runat="server" ShowStartingNode="true"/></form> </body> </html>

最后說明一下，由于項目很久以前就開始了，所以還在使用ExtJS v1.1.1，一直沒有時間升級，所以這個控件也是為extjs 1.1定制的，當然這個控件也很容易升級為2.1版的，有興趣的可以試一下。

測試項目下載

轉載于:https://www.cnblogs.com/beginor/archive/2008/07/16/1244665.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的ExtTabMenu 控件的全部內容，希望文章能夠幫你解決所遇到的問題。

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