使用 Ext.Net TreePanel,TabPanel控件 布局

<%@ Page Language="C#" %>



<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>



    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <link href="http://www.cnblogs.com/http://www.cnblogs.com/resources/css/examples.css" rel="stylesheet" type="text/css" />

    <script runat="server">

        protected void Page_Load(object sender, EventArgs e)

        {

            SiteMapNode siteNode = SiteMap.RootNode;

            Ext.Net.TreeNode root = this.CreateNode(siteNode);

            TreePanel1.Root.Add(root);

            TreePanel1.ExpandAll();

        }

        

        

        //dynamic node creation

        private TreeNodeBase CreateNodeWithOutChildren(SiteMapNode siteMapNode)

        {

            TreeNodeBase treeNode;



            if (siteMapNode.ChildNodes != null && siteMapNode.ChildNodes.Count>0)

            {

                treeNode = new AsyncTreeNode();

            }

            else

            {

                treeNode = new Ext.Net.TreeNode();

                treeNode.Leaf = true;

            }

            

            if (!string.IsNullOrEmpty(siteMapNode.Url))

            {

                treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);

            }



            treeNode.NodeID = siteMapNode.Key;

            treeNode.Text = siteMapNode.Title;

            treeNode.Qtip = siteMapNode.Description;



            return treeNode;

        }



        //static node creation with children

        private Ext.Net.TreeNode CreateNode(SiteMapNode siteMapNode)

        {

            Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();



            if (!string.IsNullOrEmpty(siteMapNode.Url))

            {

                treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);    

            }

            

            treeNode.NodeID = siteMapNode.Key;

            treeNode.Text = siteMapNode.Title;

            treeNode.Qtip = siteMapNode.Description;



            SiteMapNodeCollection children = siteMapNode.ChildNodes;



            if (children != null && children.Count > 0)

            {

                foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)

                {

                    treeNode.Nodes.Add(this.CreateNode(mapNode));

                }

            }

            

            return treeNode;

        }

    </script>

    

    <script type="text/javascript">

        var loadPage = function (tabPanel, node) {

            var tab = tabPanel.getItem(node.id);



            if (!tab) {

                tab = tabPanel.add({

                    id: node.id,

                    title: node.text,

                    closable: true,

                    autoLoad: {

                        showMask: true,

                        url: node.attributes.href,

                        mode: "iframe",

                        maskMsg: "Loading " + node.attributes.href + "..."

                    },

                    listeners: {

                        update: {

                            fn: function (tab, cfg) {

                                cfg.iframe.setHeight(cfg.iframe.getSize().height);

                            },

                            scope: this,

                            single: true

                        }

                    }

                });

            }



            tabPanel.setActiveTab(tab);

        }

    </script>

</head>

<body>

    <form id="Form1" runat="server">

        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        

        <ext:Viewport ID="Viewport1" runat="server">

            <Items>

                <ext:BorderLayout ID="BorderLayout1" runat="server">

                    <West Collapsible="true" 

                        Split="true" 

                        MinWidth="175" 

                        MaxWidth="400" 

                        MarginsSummary="5 0 5 5" 

                        CMarginsSummary="5 5 5 5">

                        <ext:TreePanel 

                            ID="TreePanel1"

                            runat="server" 

                            Width="300" 

                            Title="" 

                            Icon="ChartOrganisation">            

                            <Listeners>

                                <Click Handler="if (node.attributes.href) { e.stopEvent(); loadPage(#{Pages}, node); }" />

                            </Listeners>

                        </ext:TreePanel>

                    </West>

                    

                    <Center  MarginsSummary="0 0 0 0">

                       <ext:TabPanel ID="Pages" runat="server" EnableTabScroll="true" />

                    </Center>

                    

                </ext:BorderLayout>

            </Items>

        </ext:Viewport>

    </form>

</body>

</html>

Web.sitemap

<?xml version="1.0" encoding="utf-8"?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">

  <siteMapNode title="一级菜单">

    <siteMapNode title="二级菜单">

      <siteMapNode title="页面" description="页面" url="Default.aspx" />

          </siteMapNode>

  </siteMapNode>

</siteMap>

<Listeners>

    <Click Handler="if (node.attributes.href) { e.stopEvent(); loadPage(#{Pages}, node); }" />

</Listeners>

当点击树的节点时,如果当前节点可以导航, 就添加或激活一个tab页,

两个日期控件范围

View Code
   
     
< ext:DateField ID ="Start_Date" runat ="server" Width ="250" FieldLabel ="有效期" Format ="yyyy-MM-dd"
Vtype
="daterange" >
< Listeners >
< Render Handler ="this.endDateField ='#{End_Date}'" />
</ Listeners >
</ ext:DateField >
< ext:DateField ID ="End_Date" runat ="server" Width ="250" FieldLabel ="至" Format ="yyyy-MM-dd"
Vtype
="daterange" >
< Listeners >
< Render Handler ="this.endDateField ='#{Start_Date}'" />
</ Listeners >
</ ext:DateField >

在线Api查询

http://hi.baidu.com/xpj_jy/blog

http://www.cnblogs.com/meiqunfeng/tag/Coolite/

你可能感兴趣的:(TreePanel)