EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个treepanel,然后在每个treepanel都包含在一个Panel组件里面,最后在将每个Panel组件都添加到一个上级Panel组件里面,最后在将这个上级Panel添加到Viewport里面.这里用到三个Ext组件,分别是:Viewport ; Panel ; TreePanel.
这里先简单介绍下这三个组件:
1,Panel 是Ext控件的基础,它可以用来创建非常漂亮的界面,是一个功能强大,使用却非常简单的容器组件.像面板的展开与关闭功能就非常不错.
2,TreePanel,看名字就知道树的组件就是继承自Panel 组件,在以前如果要在客户端实现一个树是很麻烦的,要处理样式,写很多的脚本,并且还要考虑Ajax.但是现在就方便多了,你要做的就是设置几个属性而已,唯一要注意的是,在显示一棵树时,必须为它指定一个根节点,不过,这更简单.
3,Viewport 代表整个浏览器的显示区域,并会随着显示区域的大小而自动改变,一个页面有且只能够有一个Viewport .
下面在将代码复制出来之前,先看看效果图,因为效果图很精美,能够增加你的胃口:
按顺序将效果图依次展开,包括面板关闭,面板展开,树菜单展开,树菜单依次展开等
Code
1,将整个页面完整复制过来,你就会发现,Ext仅仅几行代码就能够实现非常强大的应用<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Example_TreeAutoLoad_Default" %><!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 runat="server"> <title>测试树形菜单</title> <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" /> <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-purple.css" /> <link rel="Stylesheet" type="text/css" /> <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ExtJS/ext-all.js"></script> <script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script> <style type="text/css"> .panel_icon 
{ background-image:url(images/first.gif)} .center_icon { background-image:url(images/center.png)} </style></head><body> <form id="form1" runat="server"> <div> <script type="text/javascript"> //以下是关键代码 因为是提高篇，所以假想你已经对Ext很熟悉了， //即使不熟悉也没有关系，我会继续把未完的基础篇尽快完成 function makeTreeMenu() {
var panel_west = new Ext.Panel
({ id:'panWestMenu', region:'center', title:'销售管理系统', split:true, width: 200, collapsible: true, margins:'0 0 0 0', layout:'accordion', layoutConfig:{animate:true}
}); var viewport = new Ext.Viewport ({ id:'vpMain', layout:'border', items: [ panel_west ] }); var CreateMenuPanel = function(title,TypeID) { return new Ext.Panel ({ title:title,layout:'fit',border: false,frame:true, items: [{ xtype:'treepanel',singleExpand:true,animate:true,autoScroll:true,containerScroll: true, border: false, width:200,height:370,enableDD:false,dropConfig: {appendOnly:true}, loader: new Ext.tree.TreeLoader({dataUrl:"json.aspx?Param=1"}), root:new Ext.tree.AsyncTreeNode ({ id:TypeID, text: title, draggable:false, expanded:true }) }] }); }; //加载左面的数据 var loadPanelWest = function() { Ext.Ajax.request ({ url: 'json.aspx?Param=0', success: function(response, options) { try { var panWestMenu = Ext.getCmp("panWestMenu"); if(panWestMenu) { var children = panWestMenu.findByType('panel'); if(children) { for(var i=0, len = children.length; i<len; i++) { panWestMenu.remove(children[i],true); } } } var menusArray = Ext.util.JSON.decode(response.responseText); for(var i=0; i<menusArray.length; i++) { var mp = CreateMenuPanel(menusArray[i].TypeTitle,menusArray[i].TypeID); panWestMenu.add(mp); } panWestMenu.doLayout(); } catch(e) { } } }); }; loadPanelWest(); 
} </script> <script type="text/javascript"> function ready() { makeTreeMenu(); } Ext.onReady(ready); </script> </div> </form></body></html>2,显示完整后台cs代码json.aspx.csusing Ext;using System.Collections.Generic;using Newtonsoft.Json;public partial class Example_TreeAutoLoad_json : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { string param = Request["Param"]; if (param == "0") { List<Ext.TreeNode> nodes = new List<Ext.TreeNode>(); string res = ""; try { DataSet ds = DataBusiness.GetMoreRow(Convert.ToString(param)); if (ds != null && ds.Tables[0].Rows.Count > 0) { for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { DataRow row = ds.Tables[0].Rows[i] as DataRow; Ext.TreeNode node = new Ext.TreeNode(); node.id = Convert.ToString(row["ID"]); node.parentNodeId = param; node.IsRoot = false; node.leaf = false; node.draggable = true; node.text = Convert.ToString(row["TypeCName"]); node.TypeID = Convert.ToString(row["ID"]); node.PID = Convert.ToString(param); node.TypeTitle = Convert.ToString(row["TypeCName"]); node.TypeEName = Convert.ToString(row["TypeCName"]); node.DelFlag = Convert.ToBoolean(row["DelFlag"]); nodes.Add(node); } } res = JavaScriptConvert.SerializeObject(nodes); } catch (Exception ee) { string error = ee.Message; } Response.Write(res); } else { if (Request["node"] == null || Convert.ToString(Request["node"]) == "") return; List<Ext.TreeNode> nodes = new List<Ext.TreeNode>(); string res2 = ""; try { DataSet ds = DataBusiness.GetMoreRow(Convert.ToString(Request["node"])); if (ds != null && ds.Tables[0].Rows.Count > 0) { for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { DataRow row = ds.Tables[0].Rows[i] as DataRow; Ext.TreeNode node = new Ext.TreeNode(); node.id = Convert.ToString(row["ID"]); node.parentNodeId = Convert.ToString(Request["node"]); node.IsRoot = false; node.leaf = (DataBusiness.HasChildNode(node.id)); node.draggable = true; node.text = Convert.ToString(row["TypeCName"]); node.TypeID = Convert.ToString(row["ID"]); node.PID = Convert.ToString(Request["node"]); node.TypeTitle = Convert.ToString(row["TypeCName"]); node.TypeEName = Convert.ToString(row["TypeCName"]); node.DelFlag = Convert.ToBoolean(row["DelFlag"]); nodes.Add(node); } } res2 = JavaScriptConvert.SerializeObject(nodes); } catch (Exception ee) { string error = ee.Message; } Response.Write(res2); } }}3,将涉及的实体类代码完整复制 namespace Ext{ // 摘要: // Class that represents an ExtJs TreeNode [Serializable] public class TreeNode { // 摘要: // Initializes a new instance of the TreeNode class. public TreeNode() { } // 摘要: // Css class to render a different icon to a node private string _cls; public string cls { get { return _cls; } set { _cls = value; } } // // 摘要: // If the node is draggabe private bool _draggable; public bool draggable { get { return _draggable; } set { _draggable = value; } } // // 摘要: // URL of the link used for the node (defaults to #) private string _href; public string href { get { return _href; } set { _href = value; } } // // 摘要: // target frame for the link private string _hrefTarget; public string hrefTarget { get { return _hrefTarget; } set { _hrefTarget = value; } } // // 摘要: // The path to an icon for the node. The preferred way to do this is to use // the cls or iconCls attributes and add the icon via a CSS background image. private string _icon; public string icon { get { return _icon; } set { _icon = value; } } // // 摘要: // Node id private string _id; public string id { get { return _id; } set { _id = value; } } // // 摘要: // If a node is checked (only if tree is checkbox tree) private bool _IsChecked; public bool IsChecked { get { return _IsChecked; } set { _IsChecked = value; } } // // 摘要: // If this is the root node private bool _IsRoot; public bool IsRoot { get { return _IsRoot; } set { _IsRoot = value; } } // // 摘要: // If it has children then leaf=false private bool _leaf; public bool leaf { get { return _leaf; } set { _leaf = value; } } // // 摘要: // Gets or sets the type of the node. private string _NodeType; public string NodeType { get { return _NodeType; } set { _NodeType = value; } } // // 摘要: // Id of the parent node private string _parentNodeId; public string parentNodeId { get { return _parentNodeId; } set { _parentNodeId = value; } } // // 摘要: // Text of the node private string _text; public string text { get { return _text; } set { _text = value; } } private string typeID; public string TypeID { get { return typeID; } set { typeID = value; } } private string pID; public string PID { get { return pID; } set { pID = value; } } private string typeEName; public string TypeEName { get { return typeEName; } set { typeEName = value; } } private string description; public string Description { get { return description; } set { description = value; } } private string typeTitle; public string TypeTitle { get { return typeTitle; } set { typeTitle = value; } } private DateTime addDate; public DateTime AddDate { get { return addDate; } set { addDate = value; } } private bool delFlag; public bool DelFlag { get { return delFlag; } set { delFlag = value; } } }}4,因业务逻辑仅仅涉及2个查询较为简单,这里不再列出,仅将数据表的生成脚本完整显示CREATE TABLE [dbo].[TypeTable]( [ID] [int] IDENTITY(1,1) NOT NULL, [PID] [int] NULL, [TypeEName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL, [TypeCName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL, [DelFlag] [bit] NULL CONSTRAINT [DF_TypeTable_DelFlag] DEFAULT ((0)), [AddDate] [datetime] NULL CONSTRAINT [DF_TypeTable_AddDate] DEFAULT (getdate()), CONSTRAINT [PK_TypeTable] PRIMARY KEY CLUSTERED ( [ID] ASC)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]) ON [PRIMARY]