Windows – Linux – Mac OSX Guides

Add button to Extjs GridPanel cell using renderer

I need to render a button in a GridPanel cell base on the value of that cell, like the screenshot

So, for the “Install” column I need to check for value of the Registered column, if Yes then it should create “ReInstall” button, otherwise create “Install” button, here is my snippet

 
        //...
        ,{
            header: 'Registered',
            dataIndex: 'registered',
            align: 'center',
            width: 100,
            renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                if (record.data.registered)
                    return '<img src="images/yes.png" />';
                else
                    return '<img src="images/no.png" />';
            }
        },{
            header: 'Install',
            align: 'center',
            renderer: renderInstall,
            dataIndex: 'registered',
            width: 100
        }
 
        //....
    // Renderer function
    function renderInstall(value, id, r)
    {
 
            var id = Ext.id();
            if (r.data.registered == false)
            {
                createGridButton.defer(1, this, ['Install', id, r]);
                return('<div id="' + id + '"></div>');
            }else
            {
                createGridButton.defer(1, this, ['ReInstall', id, r]);
                return('<div id="' + id + '"></div>');
            }
 
    }
    function createGridButton(value, id, record) {
        new Ext.Button({
            text: value
            ,iconCls: IconManager.getIcon('package_add')
            ,handler : function(btn, e) {
                // do whatever you want here
            }
        }).render(document.body, id);
    }

Hope that may save time for some of you!

Tagged with:     , , , ,

Related Articles

Loading Facebook Comments ...

21 Comments

  1. Johan van de Merwe

    This is very nice. Don’t mind if I use it myself I hope. Thanks

  2. antonio

    Thank you very much, you saved me a lot of work

  3. John O Donovan

    Hi,
    I’m new to grids, and have been asked to add this functionality to an existing grid. The issue I have is that the grid cell doesn’t contain a button. The bit I don’t understand is how the id (created by Ext.id()) is able to access the correct cell. In the grid, shouldn’t it be using the id passed into the renderer. Also is there any way to get the ext grid to give every cell an id.

    Thanks

    John

  4. John O Donovan

    Please delete my last comment, I have just figured it out. Thanks for a great solution.

  5. Rafa?

    Works for me. Great job. It did help me.

    Thanks

    Rafa?

  6. Mike Duglas

    Does not work for me, displays “” text instead of a button. Renderer for images in the cells doesn’t work too – displays html text instead of icon. BTW, what is IconManager? I can’t find it in ExtJS, I use ExtJS v.3.1.1.

    Mike

    • canz

      just replace
      turn(‘<div id=”‘ + id + ‘”></div>’);

      with this:

      return(”)

  7. Michael Schilder

    This worked great for me, except for one thing.

    In IE all the time, and in Firefox if I specify any width other than width:auto, I get a corruption of the display of the button.

    The left and right edge of the button (just the x-btn-ml and x-btn-mr elements that make up the button) repeat over and over and over, so that they extend to fill the grid cell, even if I stretch the cell. There in the middle of it is a perfectly rendered button, but with those endlessly repeating edges. The button itself always seems to take the same percentage of the cell, so that even if I shrink the column, the same percentage is occupied by this repeating pattern left and right.

    Thoughts? Did you encounter this yourself?

  8. alex

    Great job. But I got an error:
    Uncaught TypeError: Object function
    createGridButton(value, id, record) {
    new Ext.Button({
    text: value
    ,iconCls: IconManager.getIcon(‘package_add’)
    ,handler : function(btn, e) {
    // do whatever you want here
    }
    }).render(document.body, id);
    } has no method ‘defer

  9. Anbarasan

    Only text like “” is displayed in the cell of the gridpanel. Any help would be highly appreciated.

    Thanks in advance

  10. aldo

    Hi i tried the code in EXT JS 2 and it doesn’t work it displays only but the button don’t appears

  11. Hamman Samuel

    Great post, helped me understand extjs rendering in general!

  12. thekostya

    Thanks a lot. Very useful post.

    • Nick

      It’s not clear to me what advantage this offers over Ext.grid.ActionColumn. Also, what happens to all of the DOM objects you create here if the user does a column sort, or a filter? ExtJS will create a new table, but all of the objects previously created will not get destroyed, you will just create new ones.

  13. cyril

    Hello,
    Sorry but i am missing something :'(

    Where do you make the declaration of the function renderInstall(value, id, r),and the function createGridButton(value, id, record) to have the benefit of “createGridButton.defer”

    thank you !!!

  14. Wendy Bossons

    genius! Thank you! This is the most elegant solution I’ve found to the issue of presenting a component in the grid column.

  15. canz

    YESSS!!! tnx 🙂

  16. Adam

    Here an example updated for Ext JS 4.1


    function renderButtonCell(value, metaData, record, rowIndex, colIndex, store,
    view)
    {
    var id = Ext.id();

    Ext.Function.defer(function()
    {
    new Ext.Button(
    {
    text : 'Add',
    handler : function(btn, e)
    {
    alert(record.get('id') + ' - ' + record.get('Description'));
    }
    }).render(document.body, id);
    }, 50);

    return ('');
    }

    Ext.onReady(function()
    {
    // Create data store
    Ext.create('Ext.data.Store',
    {
    storeId : 'products',
    fields : [ 'id', 'Description', 'ProductCode', 'ImageFilename' ],
    data :
    {
    'items' : [
    {
    'id' : '1',
    'Description' : 'Apples',
    'ProductCode' : '123',
    'ImageFilename' : '123.jpg'
    },
    {
    'id' : '2',
    'Description' : 'Oranges',
    'ProductCode' : '456',
    'ImageFilename' : '456.jpg'
    },
    {
    'id' : '3',
    'Description' : 'Carrots',
    'ProductCode' : '789',
    'ImageFilename' : '789.jpg'
    } ]
    },
    proxy :
    {
    type : 'memory',
    reader :
    {
    type : 'json',
    root : 'items'
    }
    }
    });

    // Create grid
    Ext.create('Ext.grid.Panel',
    {
    title : 'Products',
    store : Ext.data.StoreManager.lookup('products'),
    renderTo : Ext.getBody(),
    columns : [
    {
    text : 'id',
    dataIndex : 'id'
    },

    {
    text : 'Description',
    dataIndex : 'Description',
    },

    {
    text : 'ProductCode',
    dataIndex : 'ProductCode'
    },

    {
    text : 'ImageFilename',
    dataIndex : 'ImageFilename'
    },

    {
    renderer : renderButtonCell
    } ]
    });
    });

    • swl

      Thanks a lot,
      it’s very useful!

  17. Ruchi

    worked for me. thanks a lot

Post your comments

Your email address will not be published. Required fields are marked *