Ext.ux.IFrame

[khusamov]

Я при помощи 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) не помогает.

Как быть???

[khusamov]

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

Можно ли так произвольно менять 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

[khusamov]

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

[khusamov]

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

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 (которые явно используются фреймворком) неизвестно какие будут последствия (несмотря на то, что их значения я потом восстанавливаю).