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

<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?

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.

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

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');