View Full Version : Prevent ExtJs from adding ext-gen ID's to HTML

27 Sep 2012, 7:53 AM
I'm having an issue where extjs is adding id's to content that I don't want id's added to.

Namely, I have a chunk of HTML that is rendered inside a extjs panel, some of this HTML is "content" that the user can edit with ckeditor. In act of pasting content into the editor and then calling the editors destroy method, is resulting in some of the content picking up ext-gen id's. Now the destroy method on ckeditor doesn't use any ext functions, it just writes the editors content to the original div it got it from using innerHTML. But it's still getting ext-gen ids.

Is there a way to prevent this?

The reason it's not good is that we're now running into situations where we have ext-gen id's that are duplicated in the page, those made by ext and those being loaded from the saved content that ext has fiddled with.

I'm hoping there is a better solution that writing a content sanitizer.

Thanks in advance.

27 Sep 2012, 9:08 AM
Have a look at these functions to change the behavior:


27 Sep 2012, 1:20 PM
getId : function() {
return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));


getAutoId: function() {
return ++Ext.AbstractComponent.AUTO_ID;

OK, so are you suggesting adding a check to the getID that checks to see if this is within the scope of DOM that I don't want id's adding to, and if it it just return the existing id or nothing?

I can see how that would work.

27 Sep 2012, 1:38 PM
Just noticed that abstract component get id isn't the culrpit here, I'm getting ext-gen id's

That looks like it might be coming from Ext.id, I guess I'm still confused why some nodes get id's and others don't. Even though none of this content has ext behaviors applied to them.

id: function(el, prefix) {
var me = this,
sandboxPrefix = '';
el = Ext.getDom(el, true) || {};
if (el === document) {
el.id = me.documentId;
else if (el === window) {
el.id = me.windowId;
if (!el.id) {
if (me.isSandboxed) {
if (!me.uniqueGlobalNamespace) {
sandboxPrefix = me.uniqueGlobalNamespace + '-';
el.id = sandboxPrefix + (prefix || "ext-gen") + (++Ext.idSeed);
return el.id;

27 Sep 2012, 1:40 PM
I suppose it could be from Ext.Element. Which I assume applies this code to any element returned in any select, even if I don't use those Elements directly, but further refine or only select a subset.

Ext.Element = Ext.core.Element = function(element, forceNew) {
var dom = typeof element == "string" ? DOC.getElementById(element) : element,

if (!dom) {
return null;

id = dom.id;

if (!forceNew && id && EC[id]) {

return EC[id].el;

this.dom = dom;

this.id = id || Ext.id(dom);

1 Oct 2012, 6:30 AM
At the moment the only consistent none regression forming solution I've found is to strip the id's from all content when I convert the content into ckeditor instance. That at least prevents my saved content from being polluted with the ext-gen id's.