Ext.ux.IFrame
 

Я при помощи Ext.ux.IFrame загружаю страницу, где тоже имеется ExtJS.

В итоге в классе Ext.ux.IFrame на строке 101

Ext.get(doc).on(
                    me._docListeners = {
                        mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
                        mousemove: fn, // window resize drag detection
                        mouseup: fn,   // window resize termination
                        click: fn,     // not sure, but just to be safe
                        dblclick: fn,  // not sure again
                        scope: me
                    }
                );

происходит ошибка:

Ext.dom.Element.constructor(): Element cache already contains an entry for id 'ext-document'. Use Ext.get() to create or retrieve Element instances.

То есть, он методом Ext.get(doc) пытается достать из фрейма элемент с id = 'ext-document'. А такой уже имеется в родительском окне (там тоже ведь загружен ExtJS).

Замена на Ext.create("Ext.dom.Element", doc) не помогает.

Как быть???

Сделал временный хак. Не знаю насколько он разрешенный...

Можно ли так произвольно менять id важных элементов страницы window и document?

Ext.define("MyApp.override.ux.IFrame", {
	
	override: "Ext.ux.IFrame",
	
	loadMask: "<div style='text-align: center'>Подождите,<br/>загружается страница...</div>",
    
    getRandomSuffixId: function() {
    	return "-iframe-" + Math.round(Math.random() * 1000);
    },
    
    getRandomId: function(prefix) {
    	return prefix + this.getRandomSuffixId();
    },
	
    getDoc: function() {
        try {
        	var doc = this.getWin().document;
        	doc.id = doc.id == "ext-document" ? this.getRandomId("ext-document") : doc.id;
            return doc;
        } catch (ex) {
            return null;
        }
    },

    getWin: function() {
        var me = this,
            name = me.frameName,
            win = Ext.isIE
                ? me.iframeEl.dom.contentWindow
                : window.frames[name];
        win.id = win.id == "ext-window" ? this.getRandomId("ext-window") : win.id;
        return win;
    },
	
});

К сожалению, даже с этим хаком какие-то проблемы вылезают после загрузки второй страницы в тот же фрейм. Но с ними сложно разобраться (не ясно откуда ноги растут, удаление метода Ext.ux.IFrame.cleanupListeners не помогло):

Uncaught TypeError: Cannot read property 'hasListeners' of undefined
Ext.define.fire @ ext-all-debug.js:18692
Ext.define.doDirectEvent @ ext-all-debug.js:18779
Ext.define.onDirectEvent @ ext-all-debug.js:18749
Ext.Function.ExtFunction.bind.method @ ext-all-debug.js:4403

Ну совсем хреново... В довесок к вышеуказанным проблемам добавилась еще одна: в этом фрейме не работает draggable... Я так полагаю из-за того, что я произвольно поменял id элементов: window и document...

Переделал хак. Даже вторая проблема пропала.

Ext.define("MyApp.override.ux.IFrame", {
	
	override: "Ext.ux.IFrame",
	
	loadMask: "<div style='text-align: center'>Подождите,<br/>загружается страница...</div>",
	
    getRandomSuffixId: function() {
    	return "-iframe-" + Math.round(Math.random() * 100000);
    },
    
    getRandomId: function(prefix) {
    	return prefix + this.getRandomSuffixId();
    },
    
    setWinDocRandomId: function() {
    	this._prevdocid = this.getDoc().id;
		this._prevwinid = this.getWin().id;
		this.getDoc().id = this.getRandomId("ext-document");
		this.getWin().id = this.getRandomId("ext-window");
    },
    
    unsetWinDocRandomId: function() {
    	this.getDoc().id = this._prevdocid;
		this.getWin().id = this._prevwinid;
    },
	
	onLoad: function() {
		this.setWinDocRandomId();
		this.callParent();
		this.unsetWinDocRandomId();
	},
	
	cleanupListeners: function() {
		this.setWinDocRandomId();
		this.callParent();
		this.unsetWinDocRandomId();
	}
	
});

Пока вроде все работает. Но из-за того, что меняются id (которые явно используются фреймворком) неизвестно какие будут последствия (несмотря на то, что их значения я потом восстанавливаю).