Ext Tree 树列表菜单

这几天在做web的界面，用ext框架来做的，感觉太省事了。

做出来的风格统一，简洁，一点美工都不用做，看起来比以往自己做的那些顺眼多了。

 

 

ext用起来也算是简单，这里就总结一下左侧的那个数列表吧。

比起自己写的数列表来简单多了，记得从前写这个数列表费了好大功夫，从网上东拼西凑出来的，展现的效果也没有这么理想。

怪不得有人说就只为了这个树列表也要学习使用ext，当然，我觉得gird也是很漂亮有用的。

在做这个树列表时候的一些要点：

1.列表数据的存储结构

2.列表数据的加载方式

3.附加参数的提供

4.列表右键菜单

5.更改节点的图标

 

第一个问题，树信息的存储结构，其实他的存储结构就是数据结构中的树了，就是，每个节点有他父节点的信息就好了，比如一条记录的字段可以为：id 、text、parentId

 

下一个问题是数据的加载方式，在自己写数列表时，是一次性加载的，就用递归循环将数据库中的记录加载上就好了。在ext的这个树中，使用的是动态加载的方式，就是点击一个节点时再加载她的子节点。具体的数据源获取可以使用设置项 dataUrl: 'tree/getNodes.php',或者treeloader。

服务器端需要返回json格式的数据便可，以系统中用到的数据为例：

{"text":"hanahwa","id":"5","leaf":false,"cls":"file","type":"group"}

 

这里面包括了附加的参数，比如type，这个字段在客户端是用node.attributes.type来访问的。

 

 右键菜单是通过绑定事件来实现的，例如：

treeList.on('contextmenu',function(node,e){});

其中'contextmenu'的定义为：

listGroupMenu = new Ext.menu.Menu({});

 

还有一个就是改变节点的图标了，有几种方法，

比如重载append函数，利用服务器返回的json数据，还有就是动态用dom方式来改变

这里就说下在这个系统中采用的方式,在该系统中需要动态的来改变节点的图标。

首先在加载节点时，设置了节点的初始图标，代码如下：

{"text":"hanahwa","id":"5","leaf":false,"cls":"file","type":"group","icon":"images/node.png"}

之后动态改变节点图标的代码如下：

if (node.getUI().getIconEl())
  {
         node.getUI().getIconEl().src="../images/car.png";
  }

 

简单的总结这么多。