- 浏览: 1612947 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
树控件:
树是由根节点、叶子节点、非叶子节点(目录节点)组成的,其中根节点只有一个,叶子节点是终端节点。
ext中节点类型有普通树节点和异步加载节点(用于后台交互)
ext中提供了节点的选择模型:单选(选择一行) 多选(选择多行) 复选(通过复选框选择)
TreePanel用于呈现我们树的面板。TreeNode是树节点,AsyncTreeNode是动态加载树节点(异步树节点)。
既然我们要创建Tree,首先要创建一个根,当然ext中根节点也是节点所以统一用TreeNode进行创建。
TreeNode中text属性表示节点名称,leaf表示节点是否是叶子节点,id节点的唯一标识,href,hreftarget表示连接地址及打开方式,draggable表示拖拽,checked表示在节点前面是否展现复选框,allowChildren,allowDrag是否允许添加子节点,是否允许拖动等等。这里text,id是必须的。
我们创建好根之后,就要创建一个树面板(TreePanel)。
TreePanel中的配置选项包含root属性,根节点。renderto用于渲染的div
这样一颗简单的树就呈现出来了
好像太简单了 我们就想根节点添加一些节点
我们发现树的图标发生了改变,可以清晰的看出是否是叶子节点。
我们也可以通过leaf属性进行指定。但是这里我们即便手动定义了leaf:false也是不起作用的因为他下面没有节点。这一点与树的加载方式有关。
如果下面有子节点我们可以强制定义成true
这里我们需要点击节点前面的+-进行展开收缩,
我们也可以通过直接点击节点区域进行展开或者收缩,这里可以通过TreeNode中的singleClickExpand:boolean
以上内容简单介绍了一下静态树的应用,下面我们来研究一下异步加载树的应用。
这里我们要用AsyncTreeNode对TreeNode进行替换。
这里我们同样需要一个根,不过这里的根节点我们使用了AsyncTreeNode异步加载树节点。
AsyncTreeNode是继承于TreeNode。loader是他自己对于TreeNode的扩展,同样我们可以按TreeNode的方式进行添加
不同的是当我们展开根之后,根节点前的图标显示一直在加载的状态
这是因为他是一个异步的节点,所以一定要有一个加载器进行数据加载来完成他的功能。
这里就用到AsyncTreeNode独有的属性loader:TreeLoader。
我们要指定一个TreeLoader来完成异步加载的数据。
Ext.tree.TreeLoader中的配置选项包括url,dataurl
实际上只需返回一个json字符串就可以了。
这里的url是现对于引用界面的相对路径
我们可以看到当使用loader之后原
这里我们发现树竟然展不完,竟然是一个无限循环。
由于我们的json数据中没有指定他是叶子节点,所以当再次点击的时候他又会重新加载,并将数据挂在当前节点下面。
根本原因在于我们将loader放置在root下面,等同于将它放置在treePanel下面
实际上loader的放置位置与实际的呈现效果会有一些区别。
这里我们间静态树节点和异步节点结合起来看看
我们将root换成静态节点,这样就不存在root展开时的加载问题
总结:我们在使用AsyncTree的时候需要引入加载器,加载器中的返回的数据是json类型的字符串
节点选择模型
我们首先看一下我们的简单树
该树不能选择多行(无论是使用shift ctrl都不可以)
在树的选择模型上存在DefaultSelectionModel和MultiSelectionModel两个模型选择器。
TreePanel可以通过getSelectionModel可以获得选择模型。默认使用DefaultSelect
不过可以通过配置选项的selModel来设置选择模型
我们通过一个例子看一下选择模型的使用
他将alert出我们所选节点的text属性
我们来看一看如何使用多选的模型选择器
这里我们可以通过ctrl进行多行选中
我们可以通过TreeNode的checked配置选项设置复选,并且可以通过TreePanel的getChecked()方法得到被选中节点的数组。
树是由根节点、叶子节点、非叶子节点(目录节点)组成的,其中根节点只有一个,叶子节点是终端节点。
ext中节点类型有普通树节点和异步加载节点(用于后台交互)
ext中提供了节点的选择模型:单选(选择一行) 多选(选择多行) 复选(通过复选框选择)
TreePanel用于呈现我们树的面板。TreeNode是树节点,AsyncTreeNode是动态加载树节点(异步树节点)。
既然我们要创建Tree,首先要创建一个根,当然ext中根节点也是节点所以统一用TreeNode进行创建。
TreeNode中text属性表示节点名称,leaf表示节点是否是叶子节点,id节点的唯一标识,href,hreftarget表示连接地址及打开方式,draggable表示拖拽,checked表示在节点前面是否展现复选框,allowChildren,allowDrag是否允许添加子节点,是否允许拖动等等。这里text,id是必须的。
我们创建好根之后,就要创建一个树面板(TreePanel)。
TreePanel中的配置选项包含root属性,根节点。renderto用于渲染的div
<body> <div id="hello"></div> </body>
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
这样一颗简单的树就呈现出来了
好像太简单了 我们就想根节点添加一些节点
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点" })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
我们发现树的图标发生了改变,可以清晰的看出是否是叶子节点。
我们也可以通过leaf属性进行指定。但是这里我们即便手动定义了leaf:false也是不起作用的因为他下面没有节点。这一点与树的加载方式有关。
如果下面有子节点我们可以强制定义成true
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var c2 = new Ext.tree.TreeNode({ id:"c2", text:"我是子节点2" }); c2.appendChild(new Ext.tree.TreeNode({ id:"c21", text:"我是子节点2的子节点" })); root.appendChild(c2); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var c2 = new Ext.tree.TreeNode({ id:"c2", text:"我是子节点2", leaf:true }); c2.appendChild(new Ext.tree.TreeNode({ id:"c21", text:"我是子节点2的子节点" })); root.appendChild(c2); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
这里我们需要点击节点前面的+-进行展开收缩,
我们也可以通过直接点击节点区域进行展开或者收缩,这里可以通过TreeNode中的singleClickExpand:boolean
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根", singleClickExpand:true }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var c2 = new Ext.tree.TreeNode({ id:"c2", text:"我是子节点2" //leaf:true }); c2.appendChild(new Ext.tree.TreeNode({ id:"c21", text:"我是子节点2的子节点" })); root.appendChild(c2); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
以上内容简单介绍了一下静态树的应用,下面我们来研究一下异步加载树的应用。
这里我们要用AsyncTreeNode对TreeNode进行替换。
这里我们同样需要一个根,不过这里的根节点我们使用了AsyncTreeNode异步加载树节点。
AsyncTreeNode是继承于TreeNode。loader是他自己对于TreeNode的扩展,同样我们可以按TreeNode的方式进行添加
Ext.onReady(function(){ var root = new Ext.tree.AsyncTreeNode({ id:"root", text:"异步树的根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
不同的是当我们展开根之后,根节点前的图标显示一直在加载的状态
这是因为他是一个异步的节点,所以一定要有一个加载器进行数据加载来完成他的功能。
这里就用到AsyncTreeNode独有的属性loader:TreeLoader。
我们要指定一个TreeLoader来完成异步加载的数据。
Ext.tree.TreeLoader中的配置选项包括url,dataurl
实际上只需返回一个json字符串就可以了。
[{ id:"c1", text:"子节点" },{ id:"c2", text:"子节点2" }]
Ext.onReady(function(){ var root = new Ext.tree.AsyncTreeNode({ id:"root", text:"异步树的根", loader:new Ext.tree.TreeLoader({ url:"treedata.js" }) }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
这里的url是现对于引用界面的相对路径
我们可以看到当使用loader之后原
root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false }));将不起作用。
这里我们发现树竟然展不完,竟然是一个无限循环。
由于我们的json数据中没有指定他是叶子节点,所以当再次点击的时候他又会重新加载,并将数据挂在当前节点下面。
根本原因在于我们将loader放置在root下面,等同于将它放置在treePanel下面
Ext.onReady(function(){ var root = new Ext.tree.AsyncTreeNode({ id:"root", text:"异步树的根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200, loader:new Ext.tree.TreeLoader({ url:"treedata.js" }) }); });
[{ id:"c1", text:"子节点", leaf:true },{ id:"c2", text:"子节点2" }]
实际上loader的放置位置与实际的呈现效果会有一些区别。
这里我们间静态树节点和异步节点结合起来看看
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"异步树的根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是子节点", leaf:false })); var c2 = new Ext.tree.AsyncTreeNode({ id:"c2", text:"我是子节点2", loader:new Ext.tree.TreeLoader({ url:"treedata.js" }) }); root.appendChild(c2); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:200 }); });
[{ id:"c1", text:"子节点21", leaf:true },{ id:"c2", text:"子节点22" }]
我们将root换成静态节点,这样就不存在root展开时的加载问题
总结:我们在使用AsyncTree的时候需要引入加载器,加载器中的返回的数据是json类型的字符串
节点选择模型
我们首先看一下我们的简单树
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是节点1" })); root.appendChild(new Ext.tree.TreeNode({ id:"c2", text:"我是节点2" })); root.appendChild(new Ext.tree.TreeNode({ id:"c3", text:"我是节点3" })); root.appendChild(new Ext.tree.TreeNode({ id:"c4", text:"我是节点4" })); root.appendChild(new Ext.tree.TreeNode({ id:"c5", text:"我是节点5" })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:300 }); });
该树不能选择多行(无论是使用shift ctrl都不可以)
在树的选择模型上存在DefaultSelectionModel和MultiSelectionModel两个模型选择器。
TreePanel可以通过getSelectionModel可以获得选择模型。默认使用DefaultSelect
不过可以通过配置选项的selModel来设置选择模型
我们通过一个例子看一下选择模型的使用
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是节点1" })); root.appendChild(new Ext.tree.TreeNode({ id:"c2", text:"我是节点2" })); root.appendChild(new Ext.tree.TreeNode({ id:"c3", text:"我是节点3" })); root.appendChild(new Ext.tree.TreeNode({ id:"c4", text:"我是节点4" })); root.appendChild(new Ext.tree.TreeNode({ id:"c5", text:"我是节点5" })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:300, tbar:[{ text:"查看", pressed:true, handler:showSelected }] }); function showSelected(){ var node = tree.getSelectionModel().getSelectedNode(); if(node){ alert(node.text); } } });
他将alert出我们所选节点的text属性
我们来看一看如何使用多选的模型选择器
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是多选根" }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是节点1" })); root.appendChild(new Ext.tree.TreeNode({ id:"c2", text:"我是节点2" })); root.appendChild(new Ext.tree.TreeNode({ id:"c3", text:"我是节点3" })); root.appendChild(new Ext.tree.TreeNode({ id:"c4", text:"我是节点4" })); root.appendChild(new Ext.tree.TreeNode({ id:"c5", text:"我是节点5" })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", title:"多选树模型", root:root, width:300, selModel:new Ext.tree.MultiSelectionModel(), tbar:[{ text:"查看", pressed:true, handler:showSelected }] }); function showSelected(){ var nodes = tree.getSelectionModel().getSelectedNodes(); if(nodes && nodes.length){ alert("选择:"+nodes.length+"个"); } } });
这里我们可以通过ctrl进行多行选中
我们可以通过TreeNode的checked配置选项设置复选,并且可以通过TreePanel的getChecked()方法得到被选中节点的数组。
Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ id:"root", text:"我是复选根", checked:false }); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"我是节点1", checked:true })); root.appendChild(new Ext.tree.TreeNode({ id:"c2", text:"我是节点2", checked:true })); root.appendChild(new Ext.tree.TreeNode({ id:"c3", text:"我是节点3", checked:true })); root.appendChild(new Ext.tree.TreeNode({ id:"c4", text:"我是节点4", checked:true })); root.appendChild(new Ext.tree.TreeNode({ id:"c5", text:"我是节点5", checked:false })); var tree = new Ext.tree.TreePanel({ renderTo:"hello", title:"复选树模型", root:root, width:300, tbar:[{ text:"查看", pressed:true, handler:showSelected }] }); function showSelected(){ var nodes = tree.getChecked(); if(nodes && nodes.length){ alert("选择:"+nodes.length+"个"); } } });
发表评论
-
ExtJS 2 系列教程
2009-02-08 18:23 3246如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
[ExtJS2.1教程-6]Tip(提示框)
2009-02-08 09:32 8178信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时, ... -
[ExtJS2.1教程-5]ToolBar(工具栏)
2009-02-07 09:25 9687面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具 ... -
[ExtJS2.1教程-4]Menu(菜单)
2009-02-04 21:20 9864menu.html <html> < ... -
[ExtJs 2.02]Grid默认选择首行并允许键盘操作
2009-01-23 14:39 4185grid默认选中第一行问题解决了 grid.getSelect ... -
[电子书]LearningExtJS(完整版2.01 en)
2009-01-22 11:11 2304What you will learn from this ... -
[ExtJs 2.02]ajax文件上传
2009-01-21 15:32 7169例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题 ... -
[ExtJs 2.02]Combobox的使用
2009-01-21 10:51 28151.简单使用: <!DOCTYPE HTML PUB ... -
grid设置某列背景颜色
2009-01-16 10:47 1818css .x-grid-back-red { back ... -
grid设置某行字体颜色
2009-01-16 10:34 3524css代码 .x-grid-record-red ... -
Ext2.0.2用于netbeans的JavaScript的库
2009-01-05 14:39 1665Ext2.0.2用于netbeans的JavaScript的库 ... -
Ext2.1API中文文档
2009-01-04 08:58 2510Ext2.1API中文文档 基本上Ext2系列都实用 需要Ad ... -
[ExtJS2.1教程-3]事件机制
2009-01-02 23:26 3399javascript的事件我们用的最多的就是用于表单验证 现在 ... -
[ExtJS2.1教程-2]组件的使用
2009-01-02 19:09 2628我们还是以alert为例 首 ... -
[ExtJS2.1教程-1]HelloWorld
2009-01-02 14:16 2650ExtJS:一个很强大的ui库 创建一个漂亮的alert &q ... -
Ext Tree控件的使用
2008-12-21 19:35 19678树是一个我们日常用的组件,Ext给我们提供了一个非常好用的树控 ... -
ext的一些组件中常用的参数整理
2008-04-15 05:33 2505grid 中的render里的参数: value:当前单元格 ... -
Ext Docs(2.0) 本地化处理,已生成CHM文件了
2008-01-15 16:27 4287ext2 的chm文档 ajaxjs论坛上发现的 不敢独享~~ ...
相关推荐
1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy...
ExtJS入门教程-超级详细-共36页 完整版 PDF,电子书方便阅读和分享。
extjs demo; blog url:http://write.blog.csdn.net/postlist
extjs-theme-bootstrap-master.zip
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
很强大的开发包,能做出和WINDOWS一样的操作界面
「extjs入门教程-SSHMavenExtjs4MySQL实战开发」.docx
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs 2.1 中文文档\电子文档extjs 2.1 中文文档\电子文档
ExtJS快速入门--传智播客--蔡世友
语言程序设计资料:ExtJs学习笔记-2积分.doc
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ExtJS----HelloWorld程序源码
Extjs2.1源码%2B教程,对于想学习ExtJS的人来说是再好也不过了
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
EXTJS4 类似于bootstrap的主题
Extjs4---combobox省市区三级联动+struts2
Extjs4---grid的修改、删除功能---结合struts2、hibernate