我自己写的关于EXTJS的TreePanel、viewPort和tabPanel动态切换和添加tabpanel的例子

最新推荐文章于 2023-03-20 16:52:51 发布

沐雪若菲

最新推荐文章于 2023-03-20 16:52:51 发布

阅读量1.4k

点赞数 1

文章标签： extjs stylesheet dataset tree server string

本文链接：https://blog.csdn.net/shelleychen008/article/details/6977061

版权

什么也不说直接上代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript">
    var tabPanel;
        Ext.onReady(function () {
            Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";

            tabPanel = new Ext.TabPanel({
                bodyBorder: false,
                region: 'center',
                defaults: { xtype: 'panel', closable: true },
                tabMargin: 5,
                activeTab: 0,
                margins: '80 0 5 5',
                cmargins: '35 5 5 5',
                items: [
						{
						    closable: true,
						    html: '<iframe width="100%" height="100%" frameborder=0 src="http://www.baidu.com"></iframe>',
						    title: 'Tab 1'
						}
					]
            });

            //北部面板  
            var topPanel = new Ext.BoxComponent({
                region: 'north',
                el: 'north',
                split: true,
                height: 32
            });
            //西部  
            var westPanel = new Ext.Panel({
                region: 'west',
                id: 'west-panel',
                title: '系统菜单',
                split: true,
                width: 250,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '80 0 5 5',
                cmargins: '80 5 5 5',
                layout: 'fit',
                layoutConfig: {
                    animate: true
                },
                items: [
               {
                   html: '<div id="tree-viewer">'
               }]
            })
            var viewport = new Ext.Viewport({
                layout: 'border',
                items: [westPanel, tabPanel]
            });

//treepanel返回的json格式的数据，然后绑定到treepanel

            var tree = new Ext.tree.TreePanel({
                el: "tree-viewer",
                useArrows: true,
                autoHeight: true,
                split: true,
                lines: true,
                autoScroll: true,
                animate: true,
                enableDD: true,
                border: false,
                containerScroll: true,
                loader: new Ext.tree.TreeLoader({
                    dataUrl: 'ext_tree_json.aspx'
                }),listeners: { beforeclick: synb, click: sync }
            });
            var root = new Ext.tree.AsyncTreeNode({
                text: '目录树',
                expanded: true,
                id: '0'
            });
            tree.setRootNode(root);
            tree.render();
        }
  );
//动态添加一个tabpanel的方法

        function sync(node, e) {
            if (node.isLeaf()) {
                e.stopEvent();
                var n = tabPanel.getComponent(node.id);
                if (!n) {
                    var n = tabPanel.add({
                        id: node.id,
                        title: node.text,
                        closable: true,
                        html: '<iframe width="100%" height="100%" frameborder=0 src="' + node.attributes.href + '"></iframe>'
                    });
                }
                tabPanel.setActiveTab(n);
            }
        }
        function synb(node, e) {
            return node.isLeaf();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">
    </div>
    <div class="menu">
        <span style="float: left">欢迎  <b>超级管理员</b>  今天是<asp:Label ID="lbl1"
            runat="server" Text="Label"></asp:Label>
               <a href="#" οnclick="ShowDialog('users/editpassword.aspx?userid=123','300px','160px')">
                修改密码</a>   <asp:LinkButton ID="LinkButton1" runat="server">清空缓存</asp:LinkButton></span>
        <span id="aLoginOut" runat="server" style="float: right"><a οnclick="if (!window.confirm('您确认要注消当前登录用户吗？')){return false;}"
            href="loginout.aspx">注销</a></span>
    </div>
    <div id="center">
    </div>
    <div id="west">
    </div>
    </form>
</body>
</html>

下面是后台的方法：

tree_json.aspx

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Text;
using System.IO;
using System.Xml;
using System.Collections.Generic;
using ExtDemo.BLL;
//Download by http://www.codefans.net
public partial class ext_tree_json : System.Web.UI.Page
{
    public CategoryManager cm = new CategoryManager();
    protected void Page_Load(object sender, EventArgs e)
    {
        string a = CreateExtTreeJSON();
        HttpContext.Current.Response.Write(CreateExtTreeJSON());
        HttpContext.Current.Response.End();
    }

//先把后台的数据转换成XML格式

    private DataTable GetAllNodes()
    {
        
        DataSet ds = new DataSet();
        StringBuilder sb = new StringBuilder();
        sb.Append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
        sb.Append("<CategoryTree>");
        sb.Append(cm.tree());
        sb.Append("</CategoryTree>");
        StringReader stringReader = new StringReader(sb.ToString());
        XmlTextReader xmlTextReader = new XmlTextReader(stringReader);
        ds.ReadXml(xmlTextReader);
        return ds.Tables[0];
    }
  //获取所有的节点  
    private DataTable GetAllNodes(string parentid)
    {
        DataTable dt = GetAllNodes();
        DataTable _dt = dt.Clone();
        foreach (DataRow dr in dt.Rows)
        {
            if (dr["parentid"].ToString() == parentid.ToString())
                _dt.Rows.Add(dr.ItemArray);
        }

        return _dt;
    }

    public string CreateExtTreeJSON()
    {
        StringBuilder sb = new StringBuilder();
        CreateExtTreeNode(sb);
        string s = sb.ToString();
        return s.Replace("}{", "},{");
    }
    /*
     * Ext Tree JSON 数据部分属性说明：
     * text: 要显示的节点文件
     * id:这个就不用解释了
     * href:链接地址
     * hrefTarget：链接目标框架名称
     * children:子节点 格式：[{节点1},{节点2}...]
     * leaf:当前节点是否为叶子节点。如果为false 则此节点有子节点。
     *                                  否则为true,此节点在无子节点
     * */
    private void CreateExtTreeNode(StringBuilder sb)
    {
        DataTable dt = GetAllNodes("0");
        if (dt.Rows.Count > 0)
        {
            sb.Append("[");
            foreach (DataRow dr in dt.Rows)
            {
                sb.Append("{");
                sb.Append("text:'" + dr["title"].ToString() + "',");
                sb.Append("id:'node" + dr["id"].ToString() + "'");
                AddChildrenNode(GetAllNodes(dr["id"].ToString()), sb);
                sb.Append("}");
            }
        }

        sb.Append("]");
    }
//添加子节点
    private void AddChildrenNode(DataTable dt, StringBuilder sb)
    {
        if (dt.Rows.Count > 0)
        {
            sb.Append(",leaf:false,children:[");
            foreach (DataRow dr in dt.Rows)
            {
                sb.Append("{");
                sb.Append("text:'" + dr["title"].ToString() + "',");
                sb.Append("id:'node" + dr["id"].ToString() + "',");
                sb.Append("href:'" + dr["url"].ToString() + "',");
                sb.Append("hrefTarget:'main'");
                AddChildrenNode(GetAllNodes(dr["id"].ToString()), sb);
                sb.Append("}");
            }

            sb.Append("]");
        }
        else
            sb.Append(",leaf:true");
    }

    public object List { get; set; }
}