PDA

View Full Version : Extjs4 Tree Grid expand upto particular level



aswini.nayak
9 Aug 2012, 3:54 AM
Can anybody help me out !!!

I am looking for the functionality where I will have a TreeGrid with tbar with 1,2,3,4,5,6,7,8,9 buttons.
These are the buttons with level no.

Initially am loading the tree and after selecting a particular row if I click on a particular button let's say 5 then it should expand upto 5th level..

How I can expand upto that level?

Thanks for your help in advance.

Regards,
Aswini

friend
9 Aug 2012, 4:32 AM
A couple of pointers to head you in the right direction:


You'll probably want to write a recursive function which accepts a Node as its sole argument, where you pass in the root node initially and the function makes recursive calls to itself if the Node.children.length > 0.
Nodes are decorated with the Ext.data.NodeInterface (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.data.NodeInterface), where method getDepth() (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.data.NodeInterface-method-getDepth) returns the depth of the node (root node has a depth of zero).
Note that Ext.data.NodeInterface also provides methods expand() (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.data.NodeInterface-method-expand) and expandChildren() (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.data.NodeInterface-method-expandChildren).

slemmon
9 Aug 2012, 8:36 PM
See if this works:



var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "1", expanded: false, children: [
{ text: "2", expanded: false, children: [
{ text: "3", expanded: false, children: [
{ text: "4", expanded: false, children: [
{ text: "5", expanded: false, children: [
{ text: "6", expanded: false, children: [
{ text: "7", expanded: false, children: [
{ text: "8", expanded: false, children: [
{ text: "9", leaf: true}
]}
]}
]}
]}
]}
]}
] }
] }
]
}
});


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
, dockedItems: [{
xtype: 'toolbar'
, dock: 'top'
, defaults: {
handler: function (btn) {
var tree = btn.up('treepanel');
tree.collapseAll();
tree.getRootNode().cascadeBy(function (node) {
if (node.getDepth() <= btn.text) { node.expand(); }
if (node.getDepth() == btn.text) { return false; }
});
}
}
, items: [{
text: '1'
}, {
text: '2'
}, {
text: '3'
}, {
text: '4'
}, {
text: '5'
}, {
text: '6'
}, {
text: '7'
}, {
text: '8'
}]
}]
});