EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
2008-11-03 16:02
459 查看
制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个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">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
//以下是关键代码 因为是提高篇,所以假想你已经对Ext很熟悉了,
//即使不熟悉也没有关系,我会继续把未完的基础篇尽快完成
function makeTreeMenu()
</script>
<script type="text/javascript">
function ready()
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
3,将涉及的实体类代码完整复制
namespace Ext
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">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
//以下是关键代码 因为是提高篇,所以假想你已经对Ext很熟悉了,
//即使不熟悉也没有关系,我会继续把未完的基础篇尽快完成
function makeTreeMenu()
</script>
<script type="text/javascript">
function ready()
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
3,将涉及的实体类代码完整复制
namespace Ext
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]
相关文章推荐
- EXTJS学习系列提高篇:第八篇(转载)作者殷良胜,制作树形菜单之二
- EXTJS学习系列提高篇:第九篇(转载)作者殷良胜,制作树形菜单之三
- EXTJS学习系列提高篇:第十篇(转载)作者殷良胜,制作树形菜单之四
- EXTJS学习系列提高篇:第十一篇(转载)作者殷良胜,制作树形菜单之五
- EXTJS学习系列提高篇:第三篇(转载)作者殷良胜,在GridPanel上单击右键显示菜单的制作
- EXTJS学习系列提高篇:第二十九篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--树形结构
- EXTJS学习系列提高篇:第二十五篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--右键菜单篇
- EXTJS学习系列提高篇:第六篇(转载)作者殷良胜,更换皮肤
- EXTJS学习系列提高篇:第十三篇(转载)作者殷良胜,利用Ext实现Icon小图标的部分用法
- EXTJS学习系列提高篇:第二十四篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--阅增删改篇
- EXTJS学习系列提高篇:第二篇(转载)作者殷良胜,结合EXT2.2+C#.net实现将数据导入Excel的功能
- EXTJS学习系列提高篇:第十四篇(转载)作者殷良胜,利用Ext显示flash或者音频或者视频的效果
- EXTJS学习系列提高篇:第二十篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--批量删除篇
- EXTJS学习系列提高篇:第十六篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--显示列表篇
- EXTJS学习系列提高篇:第二十一篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--grid扩展行篇
- EXTJS学习系列基础篇:第七篇(转载)作者殷良胜,Ext组件系列之--label组件的基本用法
- EXTJS学习系列提高篇:第十七篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--添加记录篇
- EXTJS学习系列提高篇:第四篇(转载)作者殷良胜,登陆示例
- EXTJS学习系列提高篇:第二十二篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--选择数据篇
- EXTJS学习系列提高篇:第五篇(转载)作者殷良胜,经典布局