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!

Related posts:

Share

About number.0