Как получить ссылку на кнопку html, вложенную в сетку в 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

Сначала вы должны получить ссылку на вашу кнопку Компонент.Это может быть сохранено в вашей структуре DOM где-нибудь, или вы можете получить ссылку на нее с Ext.getCmp('myId'), если вы знаете идентификатор вашего компонента.

Когда у вас есть Компонент, просто выберите его Ext.Element и выполните поиск внизDOM-дерево для такого элемента

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

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

В этом конкретном случае, Ext.getCmp('ext-comp-1169') сделает свое дело.

Однако вы должны вручную назначить более разумные значения идентификаторов для компонентов, используя опцию конфигурации id - в противном случае вы получите автоматически назначенные идентификаторы.