1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Hyderabad,India
    Posts
    35
    Vote Rating
    3
    riku351 is on a distinguished road

      0  

    Default Answered: Tree Panel with renderer

    Answered: Tree Panel with renderer


    I have a tree panel with a single column(supposed to be of kind treecolumn). This column is going to show the text for each node as well as some icons(kind of edit, delete) for each node.The icon to be shown is dependent on some business logic.

    Each icon has a specific functionality and that is to be handled through a controller. I am using a MVC architecture application.

    I have tried putting the icons with events in "items" property of the treecolumn, but thats not working.
    If by using a renderer function for the treecolumn, I am not able to attach event handlers with the icons.


    Please help.
    Thanks
    Kali

  2. Try to see if this will help:
    Code:
        var tree = Ext.create('Ext.tree.Panel', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 200,
            store: treeStore,
            columns: [{
                xtype: 'treecolumn',
                dataIndex: 'text',
                flex: 1,
                renderer: function(value){
                    return [
                        '<img src="images/icon-modify-16x16.png" action="modify" />',
                        '<img src="images/icon-delete-16x16.png" action="delete" />',
                        ' ', value
                    ].join('');
                }
            }],
            listeners: {
                itemclick: function(view, record, item, index, event){
                    var action = event.target.getAttribute('action');
                    if(action){
                       this.fireEvent(action, view, record, index);
                    }
                },
                // START DEBUG
                modify: function(){
                    console.log('modify', arguments)
                },
                delete: function(){
                    console.log('delete', arguments)
                }
                // END DEBUG
            }
        });

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,554
    Answers
    449
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    What about a 'treegrid' setup with a column dedicated to the action button using the actioncolumn xtype?

    Similar to what you see here:
    http://docs.sencha.com/ext-js/4-1/#!/example/tree/treegrid.html

    O
    nly sounds like you'd want to look at the actioncolumn API example to show how to modify the icon based on business logic.

  4. #3
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      1  

    Default


    Try to see if this will help:
    Code:
        var tree = Ext.create('Ext.tree.Panel', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 200,
            store: treeStore,
            columns: [{
                xtype: 'treecolumn',
                dataIndex: 'text',
                flex: 1,
                renderer: function(value){
                    return [
                        '<img src="images/icon-modify-16x16.png" action="modify" />',
                        '<img src="images/icon-delete-16x16.png" action="delete" />',
                        ' ', value
                    ].join('');
                }
            }],
            listeners: {
                itemclick: function(view, record, item, index, event){
                    var action = event.target.getAttribute('action');
                    if(action){
                       this.fireEvent(action, view, record, index);
                    }
                },
                // START DEBUG
                modify: function(){
                    console.log('modify', arguments)
                },
                delete: function(){
                    console.log('delete', arguments)
                }
                // END DEBUG
            }
        });

  5. #4
    Sencha User
    Join Date
    Apr 2011
    Location
    Hyderabad,India
    Posts
    35
    Vote Rating
    3
    riku351 is on a distinguished road

      0  

    Default


    Hey Vietits,

    This is exactly what I was looking for.
    This is really a gr8 help to me. It was kind of a show stopper for me.
    U saved me .



    Thanks again & Cool !!!

Thread Participants: 2

Tags for this Thread