javascript - 扩展 Ext.data.NodeInterface

Question

我想在树面板中添加一个自定义对象作为树节点。它将被用作

var complex_object = {....}
myTree.getRootNode().appendChild(new MyNode(complex_object));

为了实现这样的功能，我找到了 Ext.data.NodeInterface ，它为树节点提供了一个通用接口(interface)。所以我尝试延长它。这是它的完成方式。

var MYNS = {
       TreeNode: new Ext.Class({
        protocol : "",
        displayName : "",
        extend: 'Ext.data.NodeInterface',
        constructor : function(line) {
            this.protocol = get_protocol(line);
            this.displayName = get_display_name(line);
            var configObj = {
                id : this.protocol + "-" + this.displayName,
                text : this.displayName,
                leaf : true,
                iconCls : protocol+"-user"
            };
            this.callParent([configObj]);
        }
    })
}

事实证明，这不会创建 Ext.data.NodeInterface 的任何扩展类。然而，它创建的对象 bud 无法从其父对象中发挥作用。

 var a = new MYNS.TreeNode(...);
 a.appendChild(); // throws error

我做错了吗？如何正确地做到这一点？

Answer 1

Ext.data.NodeInterface 是一个“工厂”，用于使用所需的属性/函数来装饰 Ext.data.Model 类的原型(prototype)。

This class is used as a set of methods that are applied to the prototype of a Model to decorate it with a Node API. This means that models used in conjunction with a tree will have all of the tree related methods available on the model.

这就是你如何使用它:

Ext.define('app.MyModel', {
    extend: 'Ext.data.Model',

    fields: [ /*...*/ ],

    /*...*/
});

Ext.data.NodeInterface.decorate('app.MyModel'); // String will be resolved to Class object internally

var obj = Ext.ModelManager.create(parent, 'app.MyModel');
obj.appendChild(/*...*/);

核心方法是Ext.data.NodeInterface#decorate - 请参阅docs - 内部有利于#getPrototypeBody。这些都是静态方法。您可以重写 getPrototypeBody 来操作类定义。为了让其他 Ext 类接受更改，您宁愿覆盖 Ext.data.NodeInterface 而不是扩展它。

但是，另一种方法是通过扩展Ext.data.Model来添加所需的功能 - 这实际上可能是满足您的要求的更直接的方法。