PDA

View Full Version : How to call listener from tree node



dewangan
11 May 2012, 2:40 AM
Hi,

I am using ext js 4.1. I am new for ext js. I am using Tree panel for menu generation. but when i am passing the listener, nothing is gettig called. I am using below code. I have to fire event at each node click. Please help to resolve the same.



Ext.require([
'Ext.panel.Panel',
'Ext.menu.Menu',
'Ext.tree.*',
'Ext.data.*'
]);

var topPanel = new Ext.panel.Panel({
id : 'northID',
bodyStyle : 'background-color:#363368;font-size:25px;color:white',
layout : 'column',
frame : false,
height : 50,
monitorResize : true,
// layout : 'fit',
border : false,
// tbar : tb2,
items : [
{
xtype : 'label',
id : 'mnemonicName',
text : 'Testing screen',
style : 'margin:10px 10px'
} ]
});

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Access Management", expanded: true,
children: [
{ text: "Screen/Entities Access", leaf: true},
{ text: "Report Access", leaf: true}
] },
{ text: "Master Data Management", expanded: true, children: [
{ text: "General", leaf: true },
{ text: "Testing", leaf: true},
{ text: "Marketing", leaf: true},
{ text: "Others", leaf: true}
] },
{ text: "Report", expanded: true, children: [
{ text: "Testing", leaf: true},
{ text: "Marketing", leaf: true},
{ text: "Others", leaf: true}
] }
]
}
});

var menu = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 150,
height: 500,
store: store,
rootVisible: false,
scroll: true,
renderTo: Ext.getBody(),
listeners:{
itemclick: function(n){
alert('clicked');
}
}

});

Ext.onReady(function() {
treePanel();
});

function populateMenu() {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg : "Please wait, Loading menu....."});
Ext.Ajax.on('beforerequest', myMask.show, myMask);
Ext.Ajax.on('requestcomplete', myMask.hide, myMask);
Ext.Ajax.on('requestexception', myMask.hide, myMask);
}

function treePanel() {
var mainPanel = Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: Ext.getBody(),
border: false,
items: [{
region: 'north',
items: [topPanel],
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, menu
/*region: 'west',
collapsible: false,
title: 'Navigation',
width: 150,
autoHeight: true,
items: [ menu ]*/
// could use a TreePanel or AccordionLayout for navigational items
, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
}

friend
11 May 2012, 3:43 AM
Your code appears to work for me. Whenever I click an item in the Tree, a masked alert window is displayed, with the message 'clicked'.

dewangan
11 May 2012, 3:51 AM
Your code appears to work for me. Whenever I click an item in the Tree, a masked alert window is displayed, with the message 'clicked'.

Hi,

Its working at the panel level, but i want the same functionality at the node level.

Thanks,
Ashish

friend
11 May 2012, 4:57 AM
I think you're confused about the itemclick event. itemclick fires anytime a tree node is clicked; you're just not passing all of the available parameters to the event handler. The full function signature for an itemclick event is like so:



itemclick: function(view, record, item, index, evt, eOpts) {
// display the text of the clicked node.
Ext.Msg.alert('Node Clicked!', 'Node text is ' + record.get('text'));
}

dewangan
15 May 2012, 1:35 AM
I think you're confused about the itemclick event. itemclick fires anytime a tree node is clicked; you're just not passing all of the available parameters to the event handler. The full function signature for an itemclick event is like so:



itemclick: function(view, record, item, index, evt, eOpts) {
// display the text of the clicked node.
Ext.Msg.alert('Node Clicked!', 'Node text is ' + record.get('text'));
}



what are these parameter which i need to pass. Can you explain this using the example i added.

Thanks,
Ashish

friend
15 May 2012, 8:53 AM
Here's a direct link (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-event-itemclick) to the API docs for the Ext.tree.Panel itemclick event. This explains each input argument in detail.

An Ext.tree.Panel is the parent of all tree nodes, so it's the ideal/proper place to listen for node click events. The input arguments are auto-magically passed to the itemclick event function whenever a user clicks on a tree node.

One of the more valuable input arguments is record, where this is the record from the tree's data store which is associated with the clicked node. This let's you get the nodes text, unique ID, etc.