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

轮廓

---

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

在这种特殊情况下，

Ext.getCmp（'Ext-comp-1169'）

会起作用

---

但是，您应该使用

id

config选项手动为组件分配更合理的id值，否则您将获得自动分配的id。

首先，您应该获得对按钮组件的引用。这可以保存在DOM结构的某个地方，或者如果您知道组件的ID，可以使用

Ext.getCmp（'myId'）

获取对它的引用

当您拥有该组件时，只需获取它的Ext.Element并在dom树中搜索如下元素

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon" id="ext-comp-1169" style="width: auto;">

---

这就是我现在使用的代码

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

函数renderLinkBtn（val，p，record）{
var contentId=Ext.id（）；
延迟（1，这个，[val，contentId，record]）；
返回（“”）；
};
函数createLinkButton（值、id、记录）{
var actnBtn=new Ext.Toolbar.SplitButton（{
文本：“行动”，
图标：'../images/icon btn action.png'，
菜单：新建Ext.menu.menu({
项目：[
{文本：'项目1'}，
{文本：'项目2'}
]
})           
}).render（文档主体、id）；
}
var grid1=新的xg.GridPanel({
存储：新的Ext.data.store({
读者：读者，
数据：xg.dummyData
}),
cm：新的xg.ColumnModel({
默认值：{
宽度：20，
可排序：false
},
栏目：[
{id:'id'，标题：“Link”，呈现器：renderLinkBtn，宽度：25，对齐：'center'，数据索引：'id'}，
{id:'company'，标题：“company”，宽度：40，数据索引：'company'}，
{标题：“价格”，呈现程序：Ext.util.Format.usMoney，数据索引：'Price'}，
{标题：“更改”，数据索引：“更改”}，
{标题：'%Change'，数据索引：'pctChange'}，
{标题：“上次更新”，呈现程序：Ext.util.Format.dateRenderer（'m/d/Y'），数据索引：'lastChange'}
]
}),
sm：新的Ext.grid.RowSelectionModel({
singleSelect:false，
听众：{
rowselect:函数（sm、row、rec）{
//grid1.getView（）.refreshRow（rec）
/*var btneelement=Ext.getDom（contentIdArray[row].btnEl.id）；
btneElement.disabled=true；
外部消息警报（btnElement）*/
},
行取消选择：功能（sm、行、rec）{
/*var btneelement=Ext.getDom（contentIdArray[row].btnEl.id）；
btnElement.disabled=false*/
}
}
}),
视图配置：{
forceFit：对
},        
宽度：600，
身高：300，
答案：错，
标题：“带按钮渲染器的网格面板”，
iconCls:“图标网格”，
renderTo:document.body
});

我正在尝试将按钮渲染到网格面板。渲染后，我无法访问rowSelection网格中的button元素。你知道怎么做吗？如果你能在问题中添加相关代码（创建网格、相关事件等），那会很有帮助。我正在使用渲染器功能将拆分按钮渲染到网格。。我需要在选择网格时禁用该按钮。有解决办法吗？我无法获取行选择上的按钮引用。请为Ext.Toolbar.SplitButton提供一个id，然后您可以使用Ext.getCmp（id）轻松访问它；有关更多信息，请参阅。但是，它不是这样工作的：（使用Ext.getCmp（id）将拆分按钮呈现到网格的每一行..我的目的是在行选择上禁用此按钮。有任何建议吗？

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