Ext-js custom html data attributes - dom

Question

I need to be able to set a 'data-selenium-id' attribute for every (dynamic and not dynamic) child input field. I can set the parent tag (table in this case) with a data selenium id using the override below and I was hoping that it would set all the fields. I am quite new to ext-js and I have to keep the code in the override functions and am struggling to find the answer. the foo: 'bar' line of code below is something I've tried and also have tried calling out the parent id 'TextSearch' and setting attributes that way, however it does not come up with any new attributes. Also, as you can see the top table tag is listed with an ID. This id was created by me for a test, all tags will be created on the fly by ext-js.
Ext.override(Ext.AbstractComponent, {
onBoxReady: function () {
var me = this,
el = me.getEl();
el.set({foo: 'bar'});
if (el && el.dom) {
if (me.itemId || me.name) {
el.dom.setAttribute('data-selenium-id', me.itemId || me.name);
} else {
if (me.pickerField && me.pickerField.itemId && me.xtype) {
el.dom.setAttribute('data-selenium-id', me.pickerField.itemId + '-' + me.xtype);
}
if (me.timeField && me.timeField.itemId && me.xtype) {
el.dom.setAttribute('data-selenium-id', me.timeField.itemId + '-' + me.xtype);
}
}
}
me.callOverridden(arguments);
}
});
However I need all input fields that are dynamically created to have this attribute as well. The HTML is below.
<table class="x-field x-table-plain x-form-item x-form-type-text x-field-toolbar x-box-item x-toolbar-item x-field-default-toolbar x-hbox-form-item" style="width: 130px; table-layout: fixed; right: auto; left: 830px; top: 1px; margin: 0px;" cellpadding="0"
role="presentation" id="triggerfield-1126" foo="bar" data-selenium-id="TextSearch">
<tbody>
<tr role="presentation" id="triggerfield-1126-inputRow" class="x-form-item-input-row">
<td role="presentation" id="triggerfield-1126-labelCell" style="display:none;" valign="top" halign="left" width="5" class="x-field-label-cell">
<label id="triggerfield-1126-labelEl" for="triggerfield-1126-inputEl" class="x-form-item-label x-unselectable x-form-item-label-left" style="margin-right:5px;" unselectable="on"></label>
</td>
<td role="presentation" class="x-form-item-body x-form-trigger-wrap-focus" id="triggerfield-1126-bodyEl" colspan="3" style="width: 100%;">
<table id="triggerfield-1126-triggerWrap" class="x-form-trigger-wrap" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; table-layout: fixed;">
<tbody role="presentation">
<tr role="presentation">
<td id="triggerfield-1126-inputCell" class="x-form-trigger-input-cell" role="presentation" style="width: 100%;">
<input id="triggerfield-1126-inputEl" type="text" role="textbox" size="1" name="triggerfield-1126-inputEl" placeholder="Search events" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-toolbar-form-focus" autocomplete="off"
data-errorqtip="" style="width: 100%;">
</td>
<td role="presentation" valign="top" class=" x-trigger-cell x-unselectable" style="width:17px;" id="ext-gen1260">
<div class="x-trigger-index-0 x-form-trigger x-form-clear-trigger x-form-trigger-first" role="presentation" id="ext-gen1259"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>