1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Ludhiana, Punjab, India
    Posts
    12
    Vote Rating
    0
    surindersammy is on a distinguished road

      0  

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

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


    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 ...

  2. Code:
    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:
    Code:
    // this code is in controller
    init: function(){
        this.control({
            'leftnavigation': {
                itemclick: function(tree, record){
                    if(record.getId() == 'RequestForQuotations'){
                        // do action here
                    }
                }
            }
        });
    }

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Code:
    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:
    Code:
    // this code is in controller
    init: function(){
        this.control({
            'leftnavigation': {
                itemclick: function(tree, record){
                    if(record.getId() == 'RequestForQuotations'){
                        // do action here
                    }
                }
            }
        });
    }

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Ludhiana, Punjab, India
    Posts
    12
    Vote Rating
    0
    surindersammy is on a distinguished road

      0  

    Default


    thanks, its working....

Thread Participants: 1

Tags for this Thread