如何讓嵌套到HTML按鈕參考在GridPanel中的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;"> 

檔案

在這段代碼中，我們怎樣才能將參照按鈕元素？

Answer 1

在這種特殊情況下，Ext.getCmp('ext-comp-1169')可以解決問題。

但是，您應該使用id配置選項手動爲組件分配更多合理的ID值 - 否則您將獲得自動分配的ID。

Answer 2

首先，您應該獲得對您的按鈕組件的引用。這可以保存在您的DOM結構中，或者如果您知道組件的ID，則可以使用Ext.getCmp('myId')來獲取它的引用。

當你有分量只是取它的類型是Ext.Element和向下搜索DOM樹的元素像這樣

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

Answer 3

這是我現在使用的代碼。

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