ExtTabMenu 控件

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

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

1. 先創(chuàng)建一個TabPanel，

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

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

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

第一步，創(chuàng)建適合TabMenu顯示的sitemap，我用的sitemap示例如下：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode title="水環(huán)境">
    <siteMapNode title="基礎(chǔ)信息">
      <siteMapNode url="~/11.aspx" title="水功能區(qū)劃" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/12.aspx" title="飲用水源保護區(qū)" 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="水質(zhì)監(jiān)測斷面" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/14.aspx" title="污水處理廠" icon="~/examples/menu/list-items.gif"/>
    </siteMapNode>
    <siteMapNode title="監(jiān)測信息分析">
      <siteMapNode url="~/21.aspx" title="水功能區(qū)劃" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/22.aspx" title="飲用水源保護區(qū)" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/23.aspx" title="水質(zhì)監(jiān)測點"/>
      <siteMapNode url="~/24.aspx" title="排污口監(jiān)測點" icon="~/examples/menu/list-items.gif"/>
    </siteMapNode>
    <siteMapNode title="環(huán)境質(zhì)量">
      <siteMapNode url="~/31.aspx" title="監(jiān)測點" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/32.aspx" title="湖庫水質(zhì)監(jiān)測點" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/33.aspx" title="排污口監(jiān)測點" icon="~/examples/menu/list-items.gif"/>
      <siteMapNode url="~/34.aspx" title="海域功能區(qū)劃" icon="~/examples/menu/list-items.gif"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>

第二步，在頁面上創(chuàng)建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定制的，當(dāng)然這個控件也很容易升級為2.1版的，有興趣的可以試一下 smile_omg 。

測試項目下載

posted @ 2008-07-16 21:12 張志敏閱讀(3077) 評論(4) 收藏舉報

刷新頁面返回頂部

ExtTabMenu 控件

公告