PDA

View Full Version : Ext js 4:Acessing tree node



raiwinashu
22 Dec 2011, 2:54 AM
Hi all,

I am new to extjs.I have created Tree from Xml data generated using Generic handler.My requirement is that on clicking the child node i should be able to get the text of the node.Please someone help me to do this.
This is my screen shot of the tree

30238
I have used beforeitemclick event.I need to get node text (in my case "Plots").

This is my code


var tstore = Ext.create('Ext.data.TreeStore', {
fields: [{ name: 'leaf', type: 'bool', defaultValue: false, persist: false, mapping: 'Sno/@leaf' }, 'Bname'],
proxy: {
type: 'ajax',
url: 'xmldata.ashx',
extraParams: {
isXml: true
},
reader: {
type: 'xml',
root: 'Books',
record: 'Book'
}
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}],
root: {
text: 'Books',
id: 'id',
expanded: false
}

});

var tree = Ext.create('Ext.tree.Panel', {
store: tstore,
id: 'tree',
columns: [
{ dataIndex: 'Sno', text: 'Serial No', xtype: 'treecolumn' },
{ dataIndex: 'Bname', id: 'no' }
],
renderTo: Ext.getBody(),
height: 300,
width: 250,
title: 'Books',
hideHeaders: true,
rootVisible: true,
// useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function () {
tree.expandAll();
}
},
{
text: 'Collapse All',
handler: function () {
tree.collapseAll();
}
}]
}],
listeners: {
beforeitemclick: function (cmp, record) {

alert("Itemclick fired");
}
}

});


Regards
Ashwin

mitchellsimoens
22 Dec 2011, 11:34 AM
You have the record of the node you clicked on. You can get it from that.

slemmon
22 Dec 2011, 12:53 PM
To Mitchell's point you can use the record's get method using the property for the tree node title.

i.e.


beforeitemclick: function (view, record) {
alert(record.get('text'));
}