制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个treepanel,然后在每个treepanel都包含在一个Panel组件里面,最后在将每个Panel组件都添加到一个上级Panel组件里面,最后在将这个上级Panel添加到Viewport里面.这里用到三个Ext组件,分别是:Viewport ; Panel ; TreePanel.
这里先简单介绍下这三个组件:
1,Panel 是Ext控件的基础,它可以用来创建非常漂亮的界面,是一个功能强大,使用却非常简单的容器组件.像面板的展开与关闭功能就非常不错.
2,TreePanel,看名字就知道树的组件就是继承自Panel 组件,在以前如果要在客户端实现一个树是很麻烦的,要处理样式,写很多的脚本,并且还要考虑Ajax.但是现在就方便多了,你要做的就是设置几个属性而已,唯一要注意的是,在显示一棵树时,必须为它指定一个根节点,不过,这更简单.
3,Viewport 代表整个浏览器的显示区域,并会随着显示区域的大小而自动改变,一个页面有且只能够有一个Viewport .
下面在将代码复制出来之前,先看看效果图,因为效果图很精美,能够增加你的胃口:
按顺序将效果图依次展开,包括面板关闭,面板展开,树菜单展开,树菜单依次展开等
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.cs
using 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]
这里先简单介绍下这三个组件:
1,Panel 是Ext控件的基础,它可以用来创建非常漂亮的界面,是一个功能强大,使用却非常简单的容器组件.像面板的展开与关闭功能就非常不错.
2,TreePanel,看名字就知道树的组件就是继承自Panel 组件,在以前如果要在客户端实现一个树是很麻烦的,要处理样式,写很多的脚本,并且还要考虑Ajax.但是现在就方便多了,你要做的就是设置几个属性而已,唯一要注意的是,在显示一棵树时,必须为它指定一个根节点,不过,这更简单.
3,Viewport 代表整个浏览器的显示区域,并会随着显示区域的大小而自动改变,一个页面有且只能够有一个Viewport .
下面在将代码复制出来之前,先看看效果图,因为效果图很精美,能够增加你的胃口:
按顺序将效果图依次展开,包括面板关闭,面板展开,树菜单展开,树菜单依次展开等
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.cs
using 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]
分享到：
发表评论
-
EXT中Menu和ComboBox的BUG及解决方法
2011-04-26 19:58 1451最近一直在玩Ext,所以可 ... -
tabpanel的激活模式
2011-04-13 00:58 888listeners : { render : func ... -
ExtJs非Iframe框架加载页面实现
2011-04-09 00:32 3871在用Ext开发App应用时，一般的框架都是左边为菜单栏，中 ... -
EXTJS FORM textField emptyText 空值提交的解决办法
2011-04-02 01:10 4783Ext的textField有一个emptyText属性用起来很 ... -
项目开发中遇到的extjs常见问题
2011-03-31 22:16 1898事件触发机制 l ... -
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中使用 启用了事件验证。
2011-03-28 23:35 1234回发或回调参数无效。在配置中使用 <pages enab ... -
extjs 如何自动缩放
2011-03-24 00:03 1550例如 可编辑的grid面板 var grid_mate ... -
Extjs 开发使用
2011-03-13 16:24 1909extjs基础 extjs基础 extjs ... -
Extjs ajax实现文本框(TextField)联想功能
2011-03-13 16:19 2321<%@ page language="ja ... -
Extjs EditorGrid 可编辑表格控件
2011-03-03 23:26 1845定义Ext.grid.ColumnModel时，列的信息项ed ... -
Extjs操作Dom
2011-02-25 23:12 12611.获取dom 通过id获取： var el = Ext. ... -
调试ExtJs利器 - Firebug(Firefox插件)
2011-02-25 00:22 1077Firebug是一个Firefox插件,集HTML查看和编辑、 ... -
调试ExtJs利器 - Full Source(IE插件)
2011-02-25 00:19 986Full Source是一个Internet Explorer ... -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:17 802ExtJs的智能提示插件-Spket(Eclipse) -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:16 1491选择Help -> Software Updates - ... -
EXTJS accordion layout event
2011-02-24 20:14 1224EXTJS 的 accordion layout 布局在API ... -
extjs 相关PPT
2011-02-24 20:13 962布局介绍和开发相关介绍 -
去掉修改后extjs中grid 左上角的红三角
2011-02-17 13:54 1421gridpanel.on('afteredit',functi ... -
可输入可联想的下拉列表的实现——Ext ComboBox
2011-02-17 13:36 1857网上这样的控件不少，有很多实现方法，其中不少的很巧妙。 ... -
extjs更换皮肤
2011-02-12 13:53 2009<head runat="server&quo ...
相关推荐
使用ExtJs构建树形菜单功能，很实用的东西。
ExtJS与.NET结合开发实例 把从网上找的有关ExtJS与.NET结合开发实例进行了打包，主要是殷良胜和adyhpq的例子。
引用ExtJS5.0 实现一个树形菜单的后台管理demo
extjs实现动态树加载菜单
PS：之后的功能设计中，会发现很多的功能都是重复出现的，就可以考虑建立视图时通过继承的方式来实现，而不需要过多的重复。
ExtJs2.0学习系列ExtJs2.0学习系列
使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ，用户角色权限菜单的维护 jar文件删了一些，需要用的自己加包
extjs 树形下拉列表框，可以进行数据选择，数据回显。
ExtJs3下拉树 分两种方式调用：第一种： xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel...
20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....
从网上整理的extjs 提高篇,doc文档,有目录,从第一篇到三十四篇,有图片,效果好,方便打印,绝对是extjs爱好者的最爱.
extjs资料以及extjs学习指南，extjs资料以及extjs学习指南
ExtJs2.0学习系列大全 共15个word文档，大部分介绍都在里面了
关于ext学习的资料，有些例子 ExtJs2.0学习系列.CHM
20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....
tree 的所有功能 很难得的 我刚调试好 只需要把数据库url 用户名和密码修改 ，就可以运行 extjs 动态树 tree ajax 全部功能 10分一点都不多，绝对值得。
ExtJS4官方指南翻译：DragandDrop拖放/Grid组件/Tree组件/容器与布局