JSFiddle - React, Tailwind, and code Playground
JavaScript
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'start listening',
handler: function() {
var domContainer = this.up().getComponent('htmlContainer').el.dom;
if (domContainer.addEventListener) {
domContainer.addEventListener('DOMSubtreeModified', function(mutationEvent){
//here you could get the target element (it's in the mutationEvent) and update the store with it.
console.log('dom Modified',mutationEvent);
}, false);
this.setDisabled(true); //disabled it to prevent multiple listeners for the same event.
}
}
},
{
xtype: 'button',
text: 'change element',
handler: function() {
var domCont= this.up().getComponent('htmlContainer').el.dom;
domCont.childNodes[0].childNodes[0].innerText = "it's now: " + Ext.Date.format(new Date(), "Y-m-d H:i:s");
}
},
{
xtype: 'button',
text: 'clear element',
handler: function() {
var domCont= this.up().getComponent('htmlContainer').el.dom;
domCont.childNodes[0].childNodes[0].innerText = "";
}
},
{
itemId: 'htmlContainer',
html: '<div>stuff</div>'
}
]
});