Is there a way to overwrite the values of a dynamically created html elements created by a Sencha app?

Question

I am currently working on a project that uses Sencha for the front-end. I want to change the class value (and maybe add ID values) to the HTML elements that Sencha creates. Is there a way to achieve this using Sencha code? For example, Sencha dynamically creates this div element:

<div unselectable="on" class="x-grid-cell-inner" style="text-align:left;">Name</div>

My question is whether or not these HTML elements created by Sencha can be overwritten. If not, is there any other way to accomplish this? Thanks for the help, guys!

My idea is to overwrite the class name using some Sencha code, so that class value becomes class="block draggable" which would unlock some wanted capabilities from an external JavaScript and CSS library (https://github.com/TobiasKoller/tko.flowchartdesigner). As of right now, I have tried using the following code, but it does not work (the elements class value remained the same):

var module = new Ext.Element(document.getElementsByClassName('x-grid-cell-inner'));
module.addCls('block draggable');

Answer 1

If I haven't misunderstood the question, you can use the "cls" method, inside the sass file in the sencha structure, you define a class and you can use this method to assign it to the desired element, for example inside the sencha element:

items:[{
    xtype:'textfield',
    cls:'custom-class'
}]

and inside of your sass file:

.custom-class{
    padding:10px;
}

Note: Don't forget to run sencha app watch inside the desired file in this case