How to get html button reference nested in a gridpanel in ExtJS - extjs

Question

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon" id="ext-comp-1169" style="width: auto;">
Profile
In this code, how can we get the reference to the button element?

Answer 1

In this particular case, Ext.getCmp('ext-comp-1169') would do the trick.
However, you should manually assign more sensible id values to components by using the id config option - otherwise you get auto-assigned ids.

Answer 2

This is the code I am using now.
function renderLinkBtn(val, p, record) {
var contentId = Ext.id();
createLinkButton.defer(1, this, [val, contentId, record]);
return('<div id="' + contentId + '"></div>');
};
function createLinkButton(value, id, record) {
var actnBtn = new Ext.Toolbar.SplitButton({
text: 'Action',
icon: '../images/icon-btn-action.png',
menu: new Ext.menu.Menu({
items: [
{text: 'Item 1'},
{text: 'Item 2'}
]
})
}).render(document.body, id);
}
var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: false
},
columns: [
{id:'id', header: "Link", renderer:renderLinkBtn, width: 25, align:'center', dataIndex:'id'},
{id:'company',header: "Company", width: 40, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: false,
listeners: {
rowselect: function(sm, row, rec) {
//grid1.getView().refreshRow(rec)
/* var btnElement = Ext.getDom(contentIdArray[row].btnEl.id);
btnElement.disabled = true;
Ext.Msg.alert(btnElement);*/
},
rowdeselect:function(sm, row, rec) {
/* var btnElement = Ext.getDom(contentIdArray[row].btnEl.id);
btnElement.disabled = false;*/
}
}
}),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
animCollapse: false,
title: 'Grid Panel with Button Renderer',
iconCls: 'icon-grid',
renderTo: document.body
});

Answer 3

First you should get a reference to your button Component. This can be saved in your DOM structure somewhere or you can get a reference to it with Ext.getCmp('myId') if you know the ID of your component.
When you have the Component simply fetch it's Ext.Element and search down the dom tree for a element like this
var myButton = Ext.getCmp('ext-comp-1169');
var buttonElement = myButton.getEl().child('button');