制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个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 1480最近一直在玩Ext,所以可 ... -
tabpanel的激活模式
2011-04-13 00:58 926listeners : { render : func ... -
ExtJs非Iframe框架加载页面实现
2011-04-09 00:32 3906在用Ext开发App应用时,一般的框架都是左边为菜单栏,中 ... -
EXTJS FORM textField emptyText 空值提交的解决办法
2011-04-02 01:10 4828Ext的textField有一个emptyText属性用起来很 ... -
项目开发中遇到的extjs常见问题
2011-03-31 22:16 1928事件触发机制 l ... -
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中使用 启用了事件验证。
2011-03-28 23:35 1268回发或回调参数无效。在配置中使用 <pages enab ... -
extjs 如何自动缩放
2011-03-24 00:03 1578例如 可编辑的grid面板 var grid_mate ... -
Extjs 开发使用
2011-03-13 16:24 1954extjs基础 extjs基础 extjs ... -
Extjs ajax实现文本框(TextField)联想功能
2011-03-13 16:19 2345<%@ page language="ja ... -
Extjs EditorGrid 可编辑表格控件
2011-03-03 23:26 1884定义Ext.grid.ColumnModel时,列的信息项ed ... -
Extjs操作Dom
2011-02-25 23:12 12901.获取dom 通过id获取: var el = Ext. ... -
调试ExtJs利器 - Firebug(Firefox插件)
2011-02-25 00:22 1116Firebug是一个Firefox插件,集HTML查看和编辑、 ... -
调试ExtJs利器 - Full Source(IE插件)
2011-02-25 00:19 1004Full Source是一个Internet Explorer ... -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:17 838ExtJs的智能提示插件-Spket(Eclipse) -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:16 1516选择Help -> Software Updates - ... -
EXTJS accordion layout event
2011-02-24 20:14 1255EXTJS 的 accordion layout 布局在API ... -
extjs 相关PPT
2011-02-24 20:13 1013布局介绍和开发相关介绍 -
去掉修改后extjs中grid 左上角的红三角
2011-02-17 13:54 1459gridpanel.on('afteredit',functi ... -
可输入可联想的下拉列表的实现——Ext ComboBox
2011-02-17 13:36 1886网上这样的控件不少,有很多实现方法,其中不少的很巧妙。 ... -
extjs更换皮肤
2011-02-12 13:53 2035<head runat="server&quo ...
相关推荐
在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法、配置选项以及如何通过继承来优化代码复用。 1. **树形菜单的基本结构** 树形菜单由`Ext.tree.Panel`类创建,它是一个包含树节点的面板。每个节点都是一个`...
### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中,树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系,尤其是在展示组织架构、文件系统或者任何有层级结构的...
- **11CheckBoxTree.rar**:这是一个包含复选框功能的树形控件示例,展示了如何在ExtJS中实现树节点的多选操作,并与.NET后台进行数据同步。 - **16GridPanel2.rar**:展示了一个增强的网格面板,可能包括了行编辑...
下面我们将深入探讨如何利用ExtJS 5.0 创建一个树形菜单实例。 1. **TreePanel 基础** TreePanel 是ExtJS 中用于展示树状数据的组件,它允许用户展开和折叠节点,进行选择和编辑操作。创建一个TreePanel 需要定义...
动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...
"Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...
使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ,用户角色权限菜单的维护 jar文件删了一些,需要用的自己加包
在“ExtJS应用教程 提高篇”中,我们看到一系列教程,涵盖了从基础到高级的EXTJS使用技巧,特别是针对EXTJS 2.2版本。教程内容包括了如何使用EXTJS组件,如GridPanel和ComboBox,以及如何动态生成数据。 在提高篇的...
ExtJS是一种基于JavaScript的开源富客户端框架,特别适用于构建企业级的Web应用程序。在ExtJS 2.0版本中,这个框架提供了丰富的组件库、强大的数据管理以及灵活的布局管理,使得开发者能够创建功能强大、界面友好的...
在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...
这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端框架以及JDBC数据访问层。 1. **EXTJS动态树**: EXTJS的动态树(TreePanel)组件允许开发者...
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据管理、用户界面元素以及强大的图表和表格功能。在给定的标题和描述中,主要涉及了ExtJS中的动态树...
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 树形下拉列表框,可以进行数据选择,数据回显。
《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...
总的来说,这个“ExtJS树形框架”实例提供了一个实际的应用场景,帮助开发者学习如何将ExtJS的交互性与传统的Web开发框架(如Oracle、iBATIS和Struts)相结合,构建出复杂的前端应用。通过研究这个项目,我们可以...
动态生成下拉树形框是EXTJS中一个常见的需求,它允许用户在一个下拉菜单中展示层次化的数据结构,比如组织架构或者文件系统。这篇博客(<https://chinadeng.iteye.com/blog/794209>)可能会详细讲解如何实现这个功能...
EXTJS是一个用于创建桌面级Web应用的前端框架,它提供了丰富的组件库,如表格、树形视图、菜单、窗口、表单等。EXTJS以其强大的数据绑定、布局管理和可自定义的组件而闻名,使得开发者能够构建出高效且用户友好的...