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;">

轮廓

在这段代码中，我们如何获得对button元素的引用？

Answer 1

在这种特殊情况下，Ext.getCmp('ext-comp-1169')可以解决问题。

但是，您应该使用id配置选项为组件手动分配更合理的ID值 - 否则您将获得自动分配的ID。

Answer 2

这是我现在使用的代码。

   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

首先，您应该获得对按钮组件的引用。这可以保存在您的DOM结构中，或者如果您知道组件的ID，则可以使用Ext.getCmp('myId')获取对它的引用。

当你有Component只需获取它的Ext.Element并在dom树中搜索这样的元素

var myButton = Ext.getCmp('ext-comp-1169');
var buttonElement = myButton.getEl().child('button');

如何获取嵌套在ExtJS的gridpanel中的html按钮引用

3 个答案: