Results 1 to 4 of 4

Thread: Tree Panel with renderer

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Hyderabad,India
    Posts
    35
    Vote Rating
    3
      0  

    Default 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
            }
        });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •