Results 1 to 10 of 10

Thread: extjs core 3.0 memory leak

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Question extjs core 3.0 memory leak

    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

    Code:
    <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

    Code:
    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

    Code:
    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()

    Code:
    // 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

    Code:
    // 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?

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Exclamation

    @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:

    Code:
    Ext.select ('input,select, textarea').each(
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Default css

    yep i know about pseudo classes and possibility to define focus and blur coloring in such way

    Code:
    .input:focus {
    background: '#000084';
    }
    code must run on internet explorer 6 windows ce 5.0 device
    and explorer doesnt know how to interpret such css

    but thanks for tip wit Ex.select('a,b,c') vs ('a','b',c') maybe it will increas performance but i afraid this trick isnt 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.

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Default event selectors

    just small note on test page arent form elements means select input etc. so event arent observerd to them

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

    so two events observed only

  5. #5
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    crappyBrowser + crappyDevice = crappySolution;
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  6. #6
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Default i agree

    i agree maybe i could throw device http://www.denso-wave.com/en/adcd/pr..._ce/index.html out of window and hope it hits somebody in redmond and travel back to czech through japan cause its 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

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Default new info

    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 doesnt catch to remove all listeners? and if so with each another page amount of unremoved listeners grow?

  8. #8
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Quote Originally Posted by ostghost View Post
    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 doesnt 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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #9
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Default onbeforeunload changed

    changed to

    Code:
    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

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43

    Lightbulb

    so best solution till yet is to attach on fuction call hook

    Code:
    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

    Code:
    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
    didnt help much

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

    thanks all for help & new ideas are still welcome

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •