extjs4 tree 学习

最近在做一个项目，做到部门管理用到了extjs4的树形展示，搞得是焦头烂额，碰到了很多问题，而且firefox只报些不知所谓的异常，根本没法调试。今天终于解决了

网上再好的教程也没官方的guide好，来得精辟，网上的教程全部大同小异，全没讲到重点，extjs4下的guides 地址为{webapp}/docs/index.html#!/guide/tree  ，其中{webapp}为你extjs文档在服务器的应用名，这篇文章真的很经典，不像网上那些教程，只是本人英文不啥的，花了半天才看懂皮毛

 

The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as Grid Panel, so all of the benefits of Grid Panels - features, extensions, and plugins can also be used on Tree Panels. Things like columns, column resizing, dragging and dropping, renderers, sorting and filtering can be expected to work similarly for both components.

 

大意是：Tree Panel 组件是Ext Js的分层应用中最多功能和最优秀组件之一，Tree Panel 继承和Grid Panel继承自同一个类，所以它拥有Grid Panels的所有特性——功能，扩展性，以及插件，这些都能在Tree Panels中使用。比如列模型，列的伸缩，拖拽，渲染，排序和过滤，这些功能都能在两个控件中使用

 

In the above examples we set a couple of different properties on tree nodes. But what are nodes exactly? As mentioned before, the Tree Panel is bound to a TreeStore. A Store in Ext JS manages a collection of Model instances. Tree nodes are simply Model instances that are decorated with a NodeInterface. Decorating a Model with a NodeInterface gives the Model the fields, methods and properties that are required for it to be used in a tree. 

 

大意是：在下面的例子中我们为tree nodes设置了几个属性，但是如何准确地定义nodes?就像以前提到的，Tree Panel 绑定到TreeStore，在Ext Js 中Store绑定着Model实例的集合。Tree nodes 仅仅只是一些被NodeInterface封装过的Model的实例的集合，利用NodeInterface给Model注入一些在tree中需要用到的fields,methods和properties

 

 

接下来的这段非常重要，相信很多人在使用extjs4 Tree Panel 中的appendChild()时，都会碰到“update info is not a function”（如果没碰到，你真的很幸运），我就是不幸中的一位，baidu,google了一整天，偶尔碰到有人提出这样的问题，却没一人回答，呵呵，大牛们，你们不知道我们这些自学的人的苦处吗，知道的话就不能点拨一下吗？

The first and most important thing to understand when working with tree data is how the NodeInterface class' fields work. Every node in a Tree is simply a  Model instance decorated with the NodeInterface's fields and methods. Assume for a moment that an application has a Model called Person. A Person only has two fields - id and name:

大意是：当使用tree data时，首先也是最重要的事情就是理解NodeInterface是如何工作的，Tree 中的每一个node仅仅只是被NodeInterface封装过的Model的实例，NodeInterface向其中注入了fields，methods。假设某个时候，一个应用拥有一个Model名为Person，Person只有两个fields——id和name

 

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});

 

 At this point Person is just a plain vanilla Model. If an instance is created, it can easily be verified that it only has two fields by looking at its fields collection

大意是：在此处Person只是一个平常的Model，如果创建一个实例，很容易就能证明它只包含2个field

 

console.log(Person.prototype.fields.getCount()); // outputs '2'

 

 

When the Person model is used in a TreeStore, something interesting happens. Notice the field count now:

大意是：当Person model在TreeStore中使用时，一些有趣的事情发生了，现在注意field的数量：

 

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Person',
    root: {
        name: 'Phil'
    }
});

console.log(Person.prototype.fields.getCount()); // outputs '24'

 

 The Person model's prototype got 22 extra fields added to it just by using it in a TreeStore. All of these extra fields are defined on the NodeInterface class and are added to the Model's prototype the first time an instance of that Model is used in a TreeStore (by setting it as the root node).

大意是：当被应用在TreeStore的时候，Person model的prototype得到了22个额外的fields，所有的这些额外添加的属性都是在NodeInterface class中定义的，而且是在Store中的Model实例第一次被使用的时候被添加进来的（被设置为Tree r的root node）

上面说到的‘updateinfo is not a function’就是这个造成的，相信那些没碰到这个问题的都只是在一个js文件中玩玩小demo，从来就没有按照Ext Js4的MVC分层来定义类，所以他们能一口所通过。

如果是按照MVC架构分文件定义Model的话，当你var record = Ext.create(modelName)时，此时并不会为你的Model封装进NodeInterface的field，只有利用tree.store.getProxy().getModel()得到的Model才是真正拥有NodeInterface 的fields的Model，此时Ext.create(model)才会有updateinfo方法

 

 

NodeInterface Fields are Reserved Names

It is important to note that all of the above field names should be treated as "reserved" names. For example, it is not allowed to have a field called "parentId" in a Model, if that Model is intended to be used in a Tree, since the Model's field will override the NodeInterface field. The exception to this rule is when there is a legitimate need to override the persistence of a field.

大意是：NodeInterface中的Fields都是保留Names,比如说，在Model中不能存在一个field名为parentId，当我们在Tree中定义的Model重写了NodeInterface中的field，我们应该为这个合理需求重写field中的persistence

Most of NodeInterface's fields default to persist: false. This means they are non-persistent fields by default，Non-persistent fields will not be saved via the Proxy when calling the TreeStore's sync method or calling save() on the Model.

绝大部分的NodeInterface的fields的persist默认值为false,这意味着当你调用TreeStore的sync方法或调用Model的save方法时，它们并不通过Proxy保存

水平不行，就不乱翻译了，这些都是重点

另外，在tree中定义store时，store:Ext.create('storeName')，而在controller中又定义了store，则Ext Js会向服务器发送两次加载此store文件的请求，

如firefox提示:'name is undefined'，则多半是你的alias名错误