CODEWITHSUNDEEP
javascriptextjsd3.js
kayasa
kayasa

Reputation: 2085

Creating D3 collapsible tree within Ext JS 4.2

I have the following D3 code which works as expected. Tree is rendered and can be expanded and collapsed on clicking the nodes.

``http://jsfiddle.net/6Ldad16n/3/

Now, I need to run this from within Ext JS code. So I created another fiddle for this

``http://jsfiddle.net/07kk8fzs/2/

In the Ext JS version, I am not able to collapse the tree. Collapsing requires calling the update function from inside the update function, which is giving an error

 this.update(d);

-

Uncaught TypeError: this.update is not a function

Can someone please help me understand why this is happening and how to get around this.

Thank you

Upvotes: 0

Views: 190

Answers (1)

xaume
xaume

Reputation: 134

You need to store the scope in a property on the constructor, and then use it to call "update" within the update function. Here is your fiddle fixed: http://jsfiddle.net/kqr57ad3/

Ext.define("d3.widgets.Treeview", {
        extend: 'Ext.Panel',
        alias: 'widget.d3_treeview',
        tree: '',
        svg: '',
        duration: 1000,
        diagonal: '',
        i: 0,
        me: null, 


        constructor: function (config) {
            console.log('1) Tree View Constructor called');
            this.callParent([config]);
            console.log("Treeview - constructor FINISH");
            me = this;
        },

Then inside the update function use this reference:

me.update(d);

Upvotes: 1

Related Questions