PDA

View Full Version : extjs core 3.0 memory leak



ostghost
17 Jun 2009, 5:31 AM
situation - intranet applicatioan based on internet explorer 6 version for pocket pc
application is running on windows ce 5.0 device

it has touch screen but for better usability only keyboard keystrokes are used to gain control over application

to achieve this each page has anchor with id keyAction and tabindex



<a id="keyAction" tabindex="1">
1. refreash page
2. do something else
</a>


means on press numeric one do some function stored in javascript object

keyboard events are stored in such object



var keyboardAction = {
_key49 : function() {
// refreash page
location.href = './index.html';
},
_key50 : function() {
// do something
}
};


_keyNN where NN is key character code for example could be seen http://en.wikipedia.org/wiki/Code_page_437

so 49 is key 1 50 is key 2

when page is loaded function pageInit() is called



function pageInit(){
document.getElementById('header').innerHTML = document.getElementById('header').innerHTML + ' <span style="color:#ff0000">test point 1<span/>';

// if anchor for keyboard control exist
// set him color toggle on focus and blur
if (Ext.get('keyAction')) {
Ext.get('keyAction').on('focus', function(el){
Ext.get(el.target.id).setStyle('background', 'red');
});
Ext.get('keyAction').on('blur', function(el){
Ext.get(el.target.id).setStyle('background', '#33CC33');
});
}

// also for all form inputs located on page set such color toggle
Ext.select('input', 'select', 'textarea').each(function(field){
Ext.get(field).on('focus', function(el){
Ext.get(el.target.id).setStyle('background', '#000084');
});
Ext.get(field).on('blur', function(el){
Ext.get(el.target.id).setStyle('background', '#33CC33');
});
});

document.getElementById('header').innerHTML = document.getElementById('header').innerHTML + ' <span style="color:#ff0000">test point 2<span/>';

// just automatic refresh for testing purposes
// cause press whole time key 1 to gain refresh leads to insanity
// removing this timeout and manually refreash page leads to same error
setTimeout(function(){
location.href = './index.html'
}, 500)

}


also on keypress is observed function to find in keybardAction object propper job and do eval()



// observe action to fire job
// on keypress
Ext.get(document).on('keypress', function(evt){
keyEvent(evt);
});
if (Ext.isIE) {

// cause enter key - explorer if it is pressed fire keyup not keypress
Ext.get(document).on('keyup', function(evt){
keyEvent(evt);
});
}


error - after approx. 40 page refresh memory allocated by internet explorer 6 reach such high level that message out of memory is displayed

even if such error occures 'test point 1' is written in div id header but 'test point 2' not
so it seems that problem is in event observing

so i tried add



// if internet explorer try to clear
if (Ext.isIE) {
window.attachEvent('onunload', clearAll);
}
function clearAll(){

// empty all used object
temporaryKeyboardAction = null;
keyboardAction = null;
toggle = null;
scrollContainer = null;

// if keyActions were defined
if (Ext.get('keyAction')) {

// remove focus and blur listeners defined in pageInit()
Ext.get('keyAction').removeAllListeners();
}

// also for form elemnts
Ext.select('input', 'select', 'textarea').each(function(field){
Ext.get(field).removeAllListeners();
});

// remove keypress event
Ext.get(document).removeAllListeners();
}


clearAll is fired but memory leak persist

any idea?

hendricd
17 Jun 2009, 5:49 AM
@ostghost -- Think thru this a bit.

A well structured styleSheet could handle most of the coloring issues for you without all those listeners.

Review the documentation for Ext.select. You not using it properly. Should be:


Ext.select ('input,select, textarea').each(

ostghost
17 Jun 2009, 7:12 AM
yep i know about pseudo classes and possibility to define focus and blur coloring in such way



.input:focus {
background: '#000084';
}


code must run on internet explorer 6 windows ce 5.0 device
and explorer doesnīt know how to interpret such css

but thankīs for tip wit Ex.select('a,b,c') vs ('a','b',c') maybe it will increas performance but i afraid this trick isnīt finall solution

previously i was using prototypejs.org but same problem with memory occures maybe even more frequently so i decide to try use core extjs.com due to the fact that full extjs.com library is already used for another part of appplication.

ostghost
17 Jun 2009, 7:27 AM
just small note on test page arenīt form elements means select input etc. so event arenīt observerd to them

just one event for document to catch keypress and second to focus div id keyAction

so two events observed only

hendricd
17 Jun 2009, 7:29 AM
crappyBrowser + crappyDevice = crappySolution; :-?

ostghost
17 Jun 2009, 7:45 AM
i agree maybe i could throw device http://www.denso-wave.com/en/adcd/product/barcode/bht_700b_ce/index.html out of window and hope it hits somebody in redmond and travel back to czech through japan cause itīs toyta denso device and as we know marketing rules

toyota - nothing is impossible :-)

but in fact i must say from construction and usabillity point of view scanner is quite good but os is from stone age

ostghost
17 Jun 2009, 8:14 AM
so problem is in event observing. finally.

two Event.observe from pageInit() for focus and blur removed and memory allocating slows down if last Event.observe for keypress is removed allocating stops completely.

so question is how to remove listeners properly as you could see there is function clearAll() where removeListeners are fired but it doesnt help

is possible that if location.href = url is fired and clearAll() is hooked up on unload it doesnīt catch to remove all listeners? and if so with each another page amount of unremoved listeners grow?

hendricd
17 Jun 2009, 8:32 AM
so problem is in event observing. finally.

two Event.observe from pageInit() for focus and blur removed and memory allocating slows down if last Event.observe for keypress is removed allocating stops completely.

so question is how to remove listeners properly as you could see there is function clearAll() where removeListeners are fired but it doesnt help

is possible that if location.href = url is fired and clearAll() is hooked up on unload it doesnīt catch to remove all listeners? and if so with each another page amount of unremoved listeners grow?

the unload event is too late. Ext is torn down by then. Try the beforeunload listener instead.

ostghost
17 Jun 2009, 10:20 AM
changed to



if (Ext.isIE) {
window.attachEvent('onbeforeunload', clearAll);
}

function clearAll(){
temporaryKeyboardAction = null;
keyboardAction = null;
toggle = null;
scrollContainer = null;
Ext.select('*').removeAllListeners();
Ext.select('*').remove();
}


due to Ext.select('*').remove(); even each dom element is removed and i could see empty page for small time before redirectoin but memory allocation still grow

ostghost
18 Jun 2009, 2:30 AM
so best solution till yet is to attach on fuction call hook



Function.prototype.closure = function(obj)
{
// init object storage.
if (!window.__objs)
window.__objs = [];

// init closure storage.
if (!this.__closureFuncs)
this.__closureFuncs = [];

// make sure the object has an id and is stored in the object store.
var objId = obj.__closureObjId;
if (!objId)
__objs[objId = obj.__closureObjId = __objs.length] = obj;

// see if we previously created a closure for this object/function pair.
var closureFunc = this.__closureFuncs[objId];
if (closureFunc)
return closureFunc;

// clear reference to keep the object out of the closure scope.
obj = null;

// create the closure, store in cache and return result.
var me = this;
return this.__closureFuncs[objId] = function()
{
return me.apply(__objs[objId], arguments);
};
};


and use event observing in such way



Ext.get(document).on('keypress', keyEvent.closure(Ext.get(document)));


memory leak still persist but isn't so enormouse

solution with beforeunload and removeAllListeners() adn even remove() to remove all nodes
didnīt help much

hope that device producer allow in near future to incorporate opera device sdk

thankīs all for help & new ideas are still welcome