Question

I wanted to add a custom object as treenode in a tree panel.
It will be used as

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

To implement such feature I found Ext.data.NodeInterface whcih provides a common interface to tree nodes. So I tried to extend it. Here is how its done.

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]);
        }
    })
}

As it turns out this does not create any extended class of Ext.data.NodeInterface. It however creates object bud has not function from its parent.

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

Am I do it wrong? How do Correctly do it?

Answer 1

Ext.data.NodeInterface is a ‘factory’ for decorating the prototype of Ext.data.Model classes with properties/functions required.

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.

This is how you would use it:

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(/*...*/);

The central method is Ext.data.NodeInterface#decorate – see the docs – which facilitates #getPrototypeBody internally. These are both static methods. You could override getPrototypeBody to manipulate the class definition.
For other Ext classes to pick up the changes you would rather have to override Ext.data.NodeInterface instead of extending it.

However, another approach is to add the required functionality by extending Ext.data.Model – this might actually be the more straight-forward approach to your requirement.