1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    2
    Vote Rating
    0
    evening is on a distinguished road

      0  

    Question [3.0][Solved]child() sometimes return null

    [3.0][Solved]child() sometimes return null


    I have a regular simple table with many cells, and I want to make a simple hover handler on the cells.
    Code:
    Ext.select('.mytab td').hover(
                function (e, t) {
                    Ext.get(t).insertHtml("beforeEnd", "<span>O</span>");
                }, 
                function (e, t) {
                    Ext.get(t).child("span:last").remove();
                }
            );
    I run this on the latest version of Firefox (3.0.8) with Firebug installed.
    When I move my mouse over the cells (but the movement should not be too slow), for some cells I will get an error message in Firebug: Ext.get(t).child("span:last") is null.

    The result is the same whether I am using Ext-core 3.0 beta 1 or Ext-js 2.2.1.

    If I do some checking before removal like this:
    Code:
    function (e, t) {
                    var a = Ext.get(t).child("span:last");
                    if (a) a.remove();
                }
    then there will be no error, but the "<span>O</span>" will not be removed on some cells (it will just keep adding the span)

    If I run it on Internet Explorer, it works fine.

    BTW, I've also tried other ways using Ext.fly(), Ext.DomHelper.insertHtml() and Ext.DomQuery.selectNode(), removing the ":last" from the selector, but the result is still the same.

    As a comparison, the corresponding jQuery code for the one that I am trying to do is :
    Code:
           $('.mytab td').hover(
                function (e) {
                    $(this).append("<span>O</span>");
                }, 
                function (e) {
                    $(this).find("span:last").remove();
                }
            );
    And it works fine.

    So, maybe the way I do it in Ext-js is not correct, or the Firefox is buggy, or the child() function is buggy.
    Attached Images

  2. #2
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    This might be a simple timing problem, with the mouseout event already being triggered before the function in mouseover has completed. You could try using DelayedTask.delay in the mouseout handler to check if that is the case.

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    In that case it's probably related to this bugreport.

  4. #4
    Ext User
    Join Date
    Apr 2009
    Posts
    2
    Vote Rating
    0
    evening is on a distinguished road

      0  

    Default


    Thanks for the reply.
    I tried the DelayedTask with no luck. So it's not a timing problem.

    And then I have an idea to alert the t.innerHTML in case of Ext.get(t).child("span:last") returns null.
    Apparently, it contains "O", it means I do mouseout on top of <span>. Argument "t" refers to the <span> while "this" refers to <td>.
    So, I just have to replace t with "this" like this:
    Code:
            Ext.select('.mytab td').hover(
                function (e, t) {
                    Ext.get(this).insertHtml("beforeEnd", "<span>O</span>");
                }, 
                function (e, t) {
                    Ext.get(this).child('span:last').remove();
                }
            );
    And it works fine.
    Still wonder why it didn't result the same error in IE though.
    But anyway, case closed.

Thread Participants: 2