PDA

View Full Version : How to Access data attribute of dynamically added HTML element ?



cpsarathe
10 Nov 2014, 5:26 AM
I am using EXT JS 4.2.0 Grid and rendering anchor tag in columns like below -

renderer: function(value, meta, record, rowIndex, colIndex) {
var idHTML = '<div class="x-grid-cell-inner" style="text-align:center;">'+value+'</div>';
var hiHTML = '<div style="margin: 5px 0 0 0;">'
+'<a href="#" data-hid="5" class="h-popup button tiny">History</a>'
+ '</div>';
return idHTML + hiHTML;
},
And using delegation to bind click event to h-popup class like below -

Ext.getBody().on('click', function(event, target){
console.log('click event of hi');
//console.log(target); prints html line
//how to access 'data-hid' ?
}, null, {
delegate: '.h-popup a'
});

Now inside the callback function of click event I want to access 'data-hid' value , How can I do that ?

in Jquery it could be done using below code -

$('.h-popup').click(function(){
var that = $(this);
var hid = that.data('hid);
});

joel.watson
12 Nov 2014, 11:53 AM
Hi cpsarathe--

You should be able to use getAttribute (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.dom.Element-method-getAttribute) once you have the Ext.dom.Element (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.dom.Element). For example:



var element = Ext.get( target );
var hidValue = element.getAttribute( 'data-hid' );

cpsarathe
12 Nov 2014, 10:43 PM
Hi joel.watson

Thanks. It worked.

joel.watson
13 Nov 2014, 6:37 AM
Hi joel.watson

Thanks. It worked.

Great, glad it was helpful!