ExtJs开发教程_002_如何使用ExtJs中的Ext.data.TreeStore

介绍Ext.data.TreeStore：

 

这个组件继承自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. 1.     Request URL:

http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1

1. 2.     Request Method:

GET

1. 3.     Status Code:

200 OK

 

1. 1.     Query String Parameters
   1. 1.     _dc:

1344480677744

1. 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会直接呈现所有的节点。