PDA

View Full Version : How to get the owner tree of a node?



salvo
9 Feb 2012, 9:20 AM
In ExtJS 4 how to get the reference of owner tree for a particular node?

node.getOwnerTree() method was handy in ExtJS 3 but unfortunately it's gone - Ext.data.NodeInterface does not provides reference to parent component.

Any idea to get around this in ExtJS 4 ? :-?

sskow200
9 Feb 2012, 9:38 AM
A couple of ways. Would need to see how/where you're trying to get access to find the best solution. Could be as simple as Ext.getCmp('mytreepanel'), but if you're trying not to access it globally then you could use a number of other ways.

salvo
9 Feb 2012, 11:19 AM
sskow200

This is part of a large v3 -> v4 migration project so exposing a test case is not easy.

I'm using multiple instances of a tree component with different data models. Tree id is not set by config but by the framework during instantiation.

I need to access tree in some methods extending data model where this is the current node.

On store load I could possibly repaint each node with a ownerTreeId property to access it later with Ext.getCmp(this.data.ownerTreeId) but this looks a bit odd to me compared to the handiness provided by ExtJS 3 's getOwnerTree().

Could you shortly expose some of the "number of other ways"? Thanks.

Romick
13 Feb 2012, 4:38 AM
Hi

I can say that:
to get store

var store = tree.getStore();
to get root node you can use

var root = store.getRootNode()
to get node when you know it's id

var node = store.getNodeById(someNodeId)
and when you need parent you can use

var parent = node.parentNode
Is that what you need?

salvo
14 Feb 2012, 9:36 AM
Thanks for the answer Romick. Unfortunately this is not what I want to achieve.

I know how to go from tree to node
tree -> store -> node

What I want is the opposite in a context where this is the actual node
node -> tree

sskow200
14 Feb 2012, 12:00 PM
again. your best bet is to just query the dom for the tree. If you want a more generic solution, you can extend NodeInterface and add a property to the model that is the selector for the tree. Then create a method to return the instance of the tree.

dee1
14 Feb 2012, 8:03 PM
Similar V3 to V4 problem here: http://www.sencha.com/forum/showthread.php?180810-ExtJS-4-alternative-to-node.getOwnerTree&p=734637

@sskow200 I gather the node has no tree reference and we have multiple trees
In this case, is it still possible to query the dom for the tree using the Node Id if we don't know which tree it is?

Romick
15 Feb 2012, 12:39 AM
Ok i understand. But can you give us a little peace of code to see it. maybe there is not neccesery that method. Just send tree reference as simple function parameter.

dee1
15 Feb 2012, 5:21 AM
@Romick following is some example code that might help

ExtJS 3: the tree reference can be passed as a simple function parameter
In our case we have custom html form elements that have access to the Tree Id & Node Id which can then be passed to our processNode() function

nodeId = node.id
treeId = node.getOwnerTree().getId()

function processNode(treeId, nodeId) {
var node = Ext.getCmp(treeId).getNodeById(nodeId);
..
}


ExtJS 4: I understand a tree reference is not put onto the node for V4.
For example checkchange is only passed the node:

items:[{

id : 'panel1',
xtype : 'treepanel',
store : store1,

listeners : {
checkchange : function(node, checked, eOpts) {
..
}
}

}]

Romick
15 Feb 2012, 5:41 AM
Create your own tree panel extension whith all neccesary method and events:


Ext.define('Ext.MyTreePanel', {
extend: 'Ext.tree.Panel',
alias: 'widget.mytreepanel',

initComponent: function(){
var me = this;

Ext.apply(me, {
//config
});
me.callParent();
},

processNode: function (nodeId) {
var me = this;

var node = me.getNodeById(nodeId);
..
}
//or add "checkchange" event to thow
}


or like that:


this.tree = Ext.Create('Ext.tree.Panel', {//config});
......
items:[{

id : 'panel1',
xtype : this.tree,
store : store1,

listeners : {
checkchange : function(node, checked, eOpts) {
this.tree.getNodeById(nodeId);
...........
}
}
}]

Hope it helps.

sskow200
16 Feb 2012, 11:30 AM
I am not quite understanding why this seems so complicated and obtuse, but here it goes...



Ext.define('MyTreeStore', {
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [{
text: 'Record 1',
leaf: true
},{
text: 'Record 2',
leaf: true
},{
text: 'Record 3',
leaf: false,
children: [{
text: 'Child 1',
leaf: true
},{
text: 'Child 2',
leaf: true
}]
}]
},

onNodeAdded: function(parent, node) {
this.callParent(arguments);

//put the instance of the store in the node
node.myStore = this;
}
});

Ext.define('MyTreePanel', {
extend: 'Ext.tree.Panel',
title: 'Parent Tree',
width: 400,
height: 400,
rootVisible: false,
renderTo: Ext.getBody(),

initComponent: function() {
this.callParent(arguments);

//put tree reference in the store
this.store.myTree = this;

this.on('itemclick', this.onTreeNodeSelect, this);
},

onTreeNodeSelect: function(view, record, item, idx, evt) {
console.log(record.myStore);
console.log(record.myStore.myTree);
}
});


Ext.onReady(function(){
Ext.create('MyTreePanel', {
store: Ext.create('MyTreeStore')
});
});



Hope that helps...

dee1
17 Feb 2012, 3:57 AM
Thanks @Romick a variant of that worked
@sskow200 pointing out the onNodeAdded function is exactly what I needed - thanks, it's appreciated