PDA

View Full Version : How to Catch Tree Node Clicks From A (MVC) Controller In ExtJs 4?



surindersammy
3 May 2012, 10:45 PM
Ext.define('Saas.view.Purchases.LeftNavigationNew', {
extend : 'Ext.tree.Panel',
alias : 'widget.leftnavigation',
id : 'LeftNavTreePanel',
border : false,
rootVisible : false,
listeners: {
itemclick: function(view,node) {
if(node.isLeaf()) {
} else if(node.isExpanded()) {
node.collapse();
} else {
node.expand();
}
}
},
lines: false,
singleExpand : true,
height : 600,
root : {
border : false,
titleCollapse : true,
collapsible : true,
children :[{
cls:'tree-root',
text : 'Purchase Management',
expanded : true,
children:[{
xtype : 'button',
cls : 'tree-child',
text : 'Requests for Quotation',
id : 'RequestForQuotations',
leaf : true,
},{
cls : 'tree-child',
text : 'Purchase Orders',
leaf : true,
}],
}

and when i click on (text : 'Requests for Quotation',) node then id do-not working (id : 'RequestForQuotations',). And when i checked in firebug then id attribute not implement.
So if you have any solution of this problem then please share with me ...

vietits
4 May 2012, 12:00 AM
Ext.define('Saas.view.Purchases.LeftNavigationNew', {
extend : 'Ext.tree.Panel',
alias : 'widget.leftnavigation',
// id : 'LeftNavTreePanel',
border : false,
rootVisible : false,
listeners: {
itemclick: function(view,node) {
if(node.isLeaf()) {


} else if(node.isExpanded()) {
node.collapse();
} else {
node.expand();
}
}
},
lines: false,
singleExpand : true,
height : 600,
root : {
border : false,
titleCollapse : true,
collapsible : true,
children :[{
cls:'tree-root',
text : 'Purchase Management',
expanded : true,
children:[{
xtype : 'button',
cls : 'tree-child',
text : 'Requests for Quotation',
id : 'RequestForQuotations',
leaf : true,
},{
cls : 'tree-child',
text : 'Purchase Orders',
leaf : true,
}],
}

From your code, the code marked with red color above is data for a node in tree, it is not component config. So:
- xtype: 'button' has no effect
- id: 'RequestForQuotations' will be id of respective node (record) in the tree, not id of component.
Because this will be rendered as a node in tree, not a component so you could not query this node by anyway.

I think, a solution for your case is listening to 'itemclick' event on the tree and check if the node clicked is the right node, then do the action. Example:


// this code is in controller
init: function(){
this.control({
'leftnavigation': {
itemclick: function(tree, record){
if(record.getId() == 'RequestForQuotations'){
// do action here
}
}
}
});
}

surindersammy
4 May 2012, 12:49 AM
thanks, its working....:)