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

[surindersammy]

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]

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]

thanks, its working....