Sencha Touch 2: Change the text of an HTML button in itemTpl

Question

In the itemTpl for my DataView, I have the following line:

<div class="btn" id="colorbtn" uniqueId="{id}">{[this.getColorButton(values)]}</div>

In my listener I have the following:

listeners : {
element  : 'element',
delegate : '#colorbtn',
tap      : function(item, idx, el, evt) {
// gets the item you tapped
   btnId = el.getAttribute('uniqueId');
   //Ext.getCmp('colorbtn').setText('New Value');
    alert("hello "+btnId );
}
}

As you can see, I am trying to get the button with Ext.getCmp and set new text, but this is throwing the error Uncaught TypeError: Cannot read property 'setText' of undefined . Is there a way to achieve what I'm after?

Answer 1

Wrap the element variable returned in your event with Ext.get(), this will retrieve Ext.dom.Element object. Then you can use the available methods for Ext.dom.Element.

Example:

 Ext.get(el).setHtml('New Value') ;

Note: Automatically fixes if an object was recreated with the same id via AJAX or DOM.