Duplicate button on Row Grid?

[shaoen01]

Hi,

I am using a grid and added one button at the last column. My purpose for this button is to allow user to open another window after clicking on this button. However, when ido a search grid or reset my grid to display all rows, i will see a duplicate button being rendered. Under the address column, i should only see one manage button.

Any thoughts on how i can check if the button has been created and stop the renderer from creating again?

Untitled.jpg

{
                header: 'Address',
                width: 90,
                renderer: function(value, metadata, record) {
                    //window.alert("here");
                    
                    var divid="add_"+record.get("userid");
                    // executes after 2 seconds:
                    Ext.Function.defer(createGridButton, 500, this, ["Manage", divid, record,"icon-grid","Address"]);
                    return('<div id="' + divid + '"></div>');
                }
            }

//Create button in grid cell
function createGridButton(value, divid, record,iconname,buttonOwner) {
        new Ext.Button({
            id: divid,
            itemId: divid,
            text: value,
            iconCls: iconname,
            handler : function(btn, e) {
                //E.g. add_123
                var tmpUserID=divid.split("_")[1];
                ManageExtWindow(buttonOwner,tmpUserID)
            }
        }).render(document.body, divid);    
        

}

function ManageExtWindow(extWinType,UserID){
    if(extWinType=="Address"){
        PopupCenter("listing.php?Listing=Address&src=User&srcid=" + UserID,"Manage Address",900,600);
    }else if(extWinType=="Telephone"){
        PopupCenter("listing.php?Listing=Telephone&src=User&srcid=" + UserID,"Manage Address",900,600);
    }
    
    
}

[tobiu]

take a look at
http://docs.sencha.com/ext-js/4-0/#!....column.Action

and how it got implemented.

[shaoen01]

take a look at
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action

and how it got implemented.

Hi Tobiu,

I looked through your link, but don't quite get what you are trying to point out to me. The above scenario only happens when i try to do a search on the grid and the button gets rendered again. If the grid is on the 1st load, it has no problem.

Maybe you could fill me in a bit more on what i should be looking out for? Thanks

[shaoen01]

So i added the Ext.id() method and it seems to have worked. Anyone knows why i do not see any duplicate button being rendered after i used Ext.id()?

{
                header: 'Address',
                width: 90,
                renderer: function(value, metadata, record) {
                    var contentId = Ext.id();
                    var divid="add_"+record.get("userid");
                    // executes after 2 seconds:
                    Ext.Function.defer(createGridButton, 500, this, ["Manage", divid, record,"icon-grid","Address",contentId]);
                    return('<div id="' + contentId + '"></div>');
                    
                }
            }

function createGridButton(value, divid, record,iconname,buttonOwner,contentId) {
        new Ext.Button({
            id: divid,
            itemId: divid,
            text: value,
            iconCls: iconname,
            handler : function(btn, e) {
                //E.g. add_123
                var tmpUserID=divid.split("_")[1];
                ManageExtWindow(buttonOwner,tmpUserID)
            }
        }).render(document.body, contentId);    
        
        
}

[skirtle]

I believe that tobiu was suggesting that you use an Action Column rather than trying to inject a button like that.

An alternative would be to use the Component Column UX:

http://www.sencha.com/forum/showthread.php?148064

I believe your current implementation will suffer quite badly from leaks. Do you ever destroy those buttons (just because they are no longer on screen doesn't mean they have been destroyed)?

[shaoen01]

I believe that tobiu was suggesting that you use an Action Column rather than trying to inject a button like that.

An alternative would be to use the Component Column UX:

http://www.sencha.com/forum/showthread.php?148064

I believe your current implementation will suffer quite badly from leaks. Do you ever destroy those buttons (just because they are no longer on screen doesn't mean they have been destroyed)?

Thanks for the link. I believe i don't destroy those buttons. I have some questions about the Component Column UX. Do i need download Ctemplate and import it into my own JS?

Do you have a sample code on how i can use it with my grid? I'm still quite new to ExtJS, so any help i can get is greatly appreciated. Thanks