Ext.tree.Panel示例

1、基本示例

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.tree.Panel</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var tree = Ext.create("Ext.tree.Panel", {
10                 title: "Tree示例",
11                 width: 150,
12                 height: 100,
13                 renderTo: Ext.getBody(),
14                 root: {
15                     text: "根",
16                     expanded: true,
17                     children: [{
18                         text: "叶子1",
19                         leaf: true
20                     }, {
21                         text: "叶子2",
22                         leaf: true
23                     }]
24                 }
25             });
26         });
27     </script>
28 </head>
29 <body style="margin: 10px;">
30 </body>
31 </html>

效果图：

2、多列树

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.tree.Panel</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var tree = Ext.create("Ext.tree.Panel", {
10                 title: "Tree多列示例",
11                 width: 200,
12                 height: 150,
13                 renderTo: Ext.getBody(),
14                 fields: ["name", "description"],
15                 columns: [{
16                     xtype: "treecolumn", // 树状表格列
17                     text: "名称",
18                     dataIndex: "name",
19                     width: 100,
20                     sortable: true
21                 }, {
22                     text: "描述",
23                     dataIndex: "description",
24                     flex: 1,
25                     sortable: true
26                 }],
27                 root: {
28                     name: "根",
29                     description: "根描述",
30                     expanded: true,
31                     children: [{
32                         name: "叶子1",
33                         description: "叶子1描述",
34                         leaf: true
35                     }, {
36                         name: "叶子2",
37                         description: "叶子2描述",
38                         leaf: true
39                     }]
40                 }
41             });
42         });
43     </script>
44 </head>
45 <body style="margin: 10px;">
46 </body>
47 </html>

效果图：

3、带复选框的树

代码：

转载于:https://www.cnblogs.com/libingql/archive/2012/04/11/2442217.html

Ext.tree.Panel示例相关推荐

ExtJs之结构树 Ext.tree.panel详细用法
1.简单的树效果图代码 [javascript] view plain copy print? <script type="text/javascript" defer& ...
Ext.tab.Panel页签
Ext.tab.Panel页签组件的每个tab都是一个Ext.panel.Panel,一般情况会有多个tab同时存在,但是同一时刻只有一个处于激活状态. Ext.tab.Panel主要配置项目表: 配 ...
Ext.grid.Panel表格分页
Ext.grid.Panel表格分页示例代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...
Tree.Panel各项属性
1.Ext.tree.TreePanel 主要配置项: root:树的根节点. rootVisible:是否显示根节点,默认为true. useArrows:是否在树中使用Vista样式箭头,默认为f ...
使用Ext.grid.Panel显示远程数据
使用Ext.grid.Panel显示远程数据对于Ext.grid.Panel而言,它只是负责显示Store数组中心的数据,至于Store保存的数据到底是浏览器本地数据,还是远程服务器的数据,Ext. ...
使用Ext.grid.Panel生成表格
使用Ext.grid.Panel生成表格 Ext.grid.Panel继承了Ext.panel.Panel,因此它的很多地方都类似于Ext.panel.Panel,但定义Ext.grid.Panel时 ...
Ext Tree异步树的增加修改删除的简单实现～
之前项目有个模块要求用树形解决,附带要实现checkbox,增删修改以及copy/cut/paste等等功能: 因为之前写的人用了xloadTree,其他功能都实现了,但是客户要求要有cookie功能 ...
完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
ExtJs4 笔记 Ext.tab.Panel 选项卡
本篇讲解选项卡控件. 一.基本选项卡首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...

Ext.tree.Panel示例

Ext.tree.Panel示例相关推荐

最新文章

热门文章