extjs 4 tree学習

最近1つのプロジェクトをして、部門の管理をやり遂げてextjs 4の木の形の展示を使って、焦って額をぼろぼろにして、多くの問題にぶつかって、その上firefoxはいわゆる異常だけを報告して、まったくデバッグすることができません.今日やっと解決した
ネット上のどんなに良い教程も公式のguideがなくて、精巧に来て、ネット上の教程はすべて大同小異で、すべて重点を話していないで、extjs 4の下の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で使用することができます.列モデル、列の伸縮、ドラッグ、レンダリング、ソート、フィルタなど、2つのコントロールで使用できます.
 
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を使用してtreeで使用するfields、methods、propertiesをModelに注入します.
 
 
次の部分はとても重要で、多くの人がextjs 4 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を注入している.ある時、1つのアプリケーションにPersonというModelがあり、Personにはfieldsが2つしかありません.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 Js 4のMVC階層に従ってクラスを定義したことがないと信じているので、彼らは一口で通過することができます.
MVCアーキテクチャに従ってModelをファイル化して定義する場合、var record=Ext.create(modelName)の場合、ModelはNodeInterfaceのfieldにカプセル化されず、treeのみが利用されます.store.getProxy().getModel()で得られたModelこそ、NodeInterfaceを持つfieldsのモデルであり、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にはparentIdというfieldは存在しません.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ファイルをロードする要求を2回サーバに送信します.
firefoxのヒント:'name is undefined'の場合、ほとんどはあなたのalias名エラーです.