这个组件继承自Ext.data.AbstractStore
本篇讲解了如何构造并且做一些基本使用,如果有什么疑问可以联系我QQ1330771552
首先还是介绍下这个控件内部属性。对每一个属性做一下分析。
autoLoad:
自动加载,实际上你会发现在Ext4.X中这个属性没有多少意义,后面会做解释。
autoSync:
自动同步,比如我们用普通editingGrid的时候,修改了数据自动保存到store(不是保存到后台)
clearOnLoad:
在加载之前删除原来的所有子节点,可能在4.X中都会遇到tree第二次加载的时候数据重复,造成混乱,你可以试试这个属性。
clearRemovedOnLoad:
你加载一个节点的时候,会自动把已经删除的节点记录清除,可以参考getRemovedRecords() 函数
defaultRootId:
默认的根节点(root)id,这个是在异步加载树种很重要的,就是展开根节点的时候向后台发送请求的参数(稍后讲解)
defaultRootProperty:
子节点的属性名,用处不大。就是修改什么属性作为子节点解析用的。
fields:
属性域,跟Ext.data.Store的fields一样使用。
filters:
过滤器。
folderSort:
排序,设置为true自动为子节点排序
listeners:
监听器。定义触发事件。
model:
跟Ext.data.Store的model一样。
nodeParam:
节点参数,注意这个是参数名,defaultRootId是参数值。
proxy:
数据代理。这个跟Ext.data.Store一样。
root:
根节点,ExtJs的树允许你设置一个默认的根节点,也就是说不加载数据的情况下会显示这个作为基础的节点。通常我们使用这个节点代替treePanel的title。用来标示这棵树的目的。
storeId:store的唯一性标示,便于Ext.data.StoreManager管理,可以参看Ext.data.StoreManager. lookup( String/Object store ) : Ext.data.Store
说实话,这些属性有的我也没用过,太多了,记不过来。
下面给出一棵树的完整代码
var oaStore = Ext.create('Ext.data.TreeStore', {
// 根节点的参数是parentId
nodeParam : 'parentId',
// 根节点的参数值是0
defaultRootId : 0,
// 属性域
fields : [{
name : 'className',
type : 'string'
}, {
name : 'text',
type : 'string'
}, {
name : 'iconCls',
type : 'string'
}],
// 数据代理
proxy : {
// 请求方式
type : 'ajax',
// 请求网址
url : GET_FUNCTION_NODE_URL
}
});
上面是一棵树的代码,下面是分析代码
nodeParam : 'parentId',就是指定这棵树的根节点属性参数名。
defaultRootId : 0,就是制定这棵树的根节点参数值。
Ext.data.TreeStore默认是每个节点都带有id属性的。比如如下json
{id:’1’,className:’Ext.le.MyView’,text:’我的视图’,iconCls:’icon_depart’}
这个json是能解析到id属性的,你获取了store某条record直接.get(‘id’)就会有值。就是1
ExtJs的tree在点击可以展开的节点的时候,会向后台发送请求,请求的url就是proxy里面的url,同时还会带上参数参数就是当前点击节点的id(就是上面说的id)。
注意:当然Ext很智能,当你的树的某个节点已经有子节点了的情况下,他不会去发送请求获取子节点的。
事实上刚才的store在我的项目里面读取了这样一个json结构
[{
"children" : [{...}, {...}],
"className" : "","expandable" : true,
"expanded" : false,
"functionNodeName" : "人事管理",
"iconCls" : "",
"id" : 1,
"leaf" : false,
"memo" : "","parentId" : 0,
"primaryKey" : 1,
"text" : "人事管理"
}]
其中的expandable就是控制这个节点可以展开的。有了他节点就会可以展开(也就是有效箭头或者“+”图标在旁边),并且会发送请求子节点。
想想,后台能获取当前点击的那个节点的id,想得到子节点很容易了,
注意:expandable属性和children属性有这样的冲突,当children属性是array([])长度是0的时候,expandable被视为false,也就是说记载的数据有0个children就认为不可以展开
select * from department where parentId=````````聪明的你懂的。
这样就能构成异步树。
这棵树如何被应用到panel中呢
事实上你只需要这样的代码就能完成。
{
title : '模块菜单',
xtype : 'treepanel',
rootVisible : false,
store : oaStore,
useArrows : true
}
看看,是不是很简单,一个标题,一个xtype,rootVisible属性控制能不能看到根节点,关于这个属性,其实就是控制是否显示你默认的那个根节点,其实如果你的根节点expanded属性(是否已经展开)是false然后treePanel rootVisible是false那么你的树在页面渲染完成的时候是什么也看不到的。而且你可能无法看到,至少你应该允许看到根节点,然后打开根节点才能看到下面的内容,或者你的根节点隐藏,默认根节点已经展开。
刚才的treePanel是个不完整的例子,是json格式的,下面给出Ext.create格式
不要误会,这个跟上面的store没有任何关系
var deptGrid = Ext.create('Ext.tree.Panel', {
store : deptStore,
useArrows : true,//展开按钮图标是箭头还是+-
rootVisible : true,//允许看到跟节点
columns : deptColumns(),//构造列
tbar : deptTbar,//不解释
padding : 5,//不解释
columnLines : true,//列分割线
});
这是一个非常基础的列子,还带了一些没用的属性,不解释的就是么哦用的属性,可有可无包括columns
如果你不写columns会默认使用text、id等这些默认属性,详细可以参看Ext.data.NodeInterface和Ext.tree.Panel后续章节会讲解这些相关控件。
这棵树能做到什么效果呢?
很简单,默认记载好的树,只呈现最基本的节点,当你点击可展开的节点的时候会去请求后台加载其子节点,发送的url大致如下
下面是googleChrome中netWork监控得到的请求,这个请求拦截于我展开一个节点的时候发生的。
-
1. Request URL:
http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1
-
2. Request Method:
GET
-
3. Status Code:
200 OK
-
1. Query String Parameters
-
1. _dc:
1344480677744
-
2. parentId: (看到这个属性没有,就是我们自己定义的nodeParam)
1
注意这个url
http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1
http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action到这里是我的后台地址。
后面的_dc=1344480677744是用来做唯一标示不造成缓存。
parentId=1 这个就是Ext帮助我们构造异步加载树的参数。
至于如何不异步加载,你可以直接把json构造好树的样子,子节点使用children标示.
给出一个同步加载的json例子
[{
"children" : [{
"children" : [{
"children" : [],
"companyName" : "123asd",
"deleter" : 0,
"departmentName" : "123asds",
"duty" : "sa",
"expandable" : true,
"expanded" : false,
"id" : 4,
"leader" : 1,
"leaf" : true,
"memo" : "ad",
"primaryKey" : 4,
"text" : "123asds"
}, {
"children" : [],
"companyName" : "爱上",
"departmentName" : "爱上",
"duty" : "阿斯达",
"expandable" : true,
"expanded" : false,
"id" : 3,
"leader" : 1,
"leaf" : true,
"memo" : "阿斯达",
"parentId" : 2,
"primaryKey" : 3,
"text" : "爱上"
}],
"companyName" : "叶子公司",
"departmentName" : "大陆分公司",
"duty" : "没职位",
"expandable" : true,
"expanded" : false,
"id" : 2,
"leader" : 1,
"leaf" : false,
"memo" : "没有",
"primaryKey" : 2,
"text" : "大陆分公司"
}],
"companyName" : "叶子集团",
"deleter" : 0,
"departmentName" : "大陆总公司",
"duty" : "总职务",
"expandable" : true,
"expanded" : false,
"id" : 1,
"leader" : 1,
"leaderName" : "",
"leaf" : false,
"memo" : "没有备注",
"primaryKey" : 1,
"text" : "大陆总公司"
}]
这样结构是json会直接呈现所有的节点。
相关推荐
extjs简明教程_中文手册,学习extjs绝对好资料。
ExtJs 教程_完整版,适合新手开发 第一章 起步1在这章里我们将介绍ExtJS的基本功能。如果你对web开发熟悉的话您会惊诧于ExtJS框架的优雅不同其他的JavaScript库ExtJS为您的开发夯实了基础只需几行代码...
ExtJs框架系列之图片批量显示,上传,删除.rarExtJs框架系列之图片批量显示,上传,删除.rar
ExtJs4.0教程_完整版_新手开 1 Extjs初步 1.1 获取Extjs 下载extjs可以从http://extjs.org.cn/ 获得需要的extjs发布包及更多支持。 1.2 搭建学习环境 假设您的机器已安装myeclipse和tomcat如果没有请参阅其他相关...
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
EXTJS+ASP开发通讯录程序,作为学习EXTJST学习实例
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
_Ext.JS.4.First.Look_第1版__._Ext.JS.4.First.Look_.Loiane.Groner.文字版
ExtJs教程_完整版,Extjs入门教程,不错
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二)...
ExtJS开发插件及Ext包.一个是Spket一个是Ext包
ExtJs教程_完整版
Extjs精华版图书管理系统功能比较强大...注意事项:1、开发环境为Visual Studio 2010,数据库为SQL Server 2008,数据库文件在DB_data文件夹中,使用.net 2.0开发。2、默认数据库连接字符串在webconfig配置文件中修改。
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide ...注明:在Extjs4.1上是可以使用的,Extjs4.2部分会有问题。
29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 ...
extjs_cook_book_Code.zip
ExtJs+4.1.0_API[中文版]
ExtJS_OA_System.rar是一个用ExtJs写的一个系统!! 可以参考!!