1. #141
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    Okay, I will try it, thank you

  2. #142
    Sencha User
    Join Date
    Oct 2013
    Posts
    2
    Vote Rating
    0
    jayg27 is on a distinguished road

      0  

    Default IE Focus Issue

    IE Focus Issue


    First of all... Great component! Thanks.

    I am having an issue with components not receiving focus in IE. I am using IE10, have a grid with a row of two comboboxes and a text field. When I click on a text field, for example, the field has the cursor but the component never fires the focus event.

    Easy test is on your example page, http://skirtlesden.com/ux/component-column, the first example. Click on any of the name text field. Notice that the IE's built in 'X' to clear the field does not show up for every field. You have to click on it again, then which it receives focus.

    Any ideas on workarounds or fixes?

    Thanks,
    Jay

  3. #143
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    After profiling around I found that adding component columns blocks my UI for a few seconds.

    The problem isn't how long it takes, but that I can't do anything with the UI while it happens.

    layouts.png

    In this picture, the long violet layout bar at the end appears when the 4 component columns are added.
    It's the time, when the rows of the grid are rendered after the data is loaded.

    Suspending the layouts while this happens didn't help, because they have to be rendered at some point and 3 x 20 draw-components + 1 x 20 buttons are expensive, so I don't think this can be eliminated totally.

    But it would be nice if I could stretch the process a bit to get some time-gaps where the UI is accessible, but I don't know how to accomplish this, since the actual rendering happens somewhere in the framework (ctemplate, ccolumn or extjs).

  4. #144
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,508
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @da_b0uncer. A picture of a purple line doesn't give me much to work with. You need to dig in to figure out what it's actually doing. Chrome's CPU profile is usually the best way to figure out performance problems like this.

    If you'd like my help trying to resolve this bottleneck then you'll need to send me a complete test case so that I can reproduce the problems you're having. You can send it to me via PM or email.

  5. #145
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    Oh okay.

    I thought the case of >60 component cells, could be a common problem. But probably it only occurs when those are filled with draw components.

    My app is rather complex, so I will try to reproduce the problem in a simpler version.

    Sorry to bother you

  6. #146
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    benoitp is on a distinguished road

      0  

    Default


    Hi,

    Thanks for your plugin, it is a great addition to the Extjs Grid.

    I encountered an issue though on IE (tested on IE9) with Ext 4.0.7 as shown in this jsfiddle : http://jsfiddle.net/cAS6e/29/

    The comboboxes do not respond to changes in the textfield half of the times (try using one combo after the other). The events (blur and keydown) are not raised half of the times.

    Upgrading to 4.1 solves the issue.

    If not a fix (I understand 4.0.7 is somehow overdue now), could you point to why this is happening and a possible workaround ?

    Thanks in advance for your help

    Ben

  7. #147
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    noiks is on a distinguished road

      0  

    Default ReferenceError

    ReferenceError


    Any idea why will I get below error,
    Code:
    ReferenceError: record is not defined
    Code:
     xtype: 'componentcolumn', 
     renderer: function(value, m, record) { 
                      return { 
                                  xtype: 'button',
                                  handler: function() {   
                                   var r = record;                                                                                    
    }

  8. #148
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,508
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @noiks. I don't see any reason why that code would cause that error. Set your debugger to break on errors (pause on exceptions) and see what that throws up.

    @jayg27 & @benoitp.

    The IE focus problems are most obvious in 4.0 and 4.2, but 4.1 isn't entirely behaving itself either. The problem seems to be that the selection model is trying to give the grid row focus, which is stealing the focus away from the field. A quick experiment suggests that you can prevent this by stopping the propagation of the mousedown and click events:

    Code:
    inputEl: {
        click: function(ev) {
            ev.stopPropagation();
        },
    
        keydown: function(ev) {
            ev.stopPropagation();
        },
    
        mousedown: function(ev) {
            ev.stopPropagation();
        }
    }
    It might be better to put the listeners on the el rather than the inputEl, whatever works best for you.

    This will also prevent the row from being selected when the field is clicked. If you want selection without the focus problems then you're going to have to dig in yourself and do some tactical overrides on the relevant classes. Rather you than me.

    For reference, Action column attempts something similar in its processEvent method. It's maybe something for me to consider in a future version of Component column, though grid gadgets in ExtJS 5 will make Component column somewhat redundant.

  9. #149
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    29
    Vote Rating
    4
    Alexey.Solonets is on a distinguished road

      0  

    Default


    This happens because 'record' argument is already not visible when 'handler' function is executed.

    Code:
    {
        xtype: 'componentcolumn', 
        renderer: function(value, m, record) {
            var rec = record;
            return {
                xtype: 'button',
                handler: function() {
                    // use 'rec' here
                }
        }
    }

  10. #150
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,508
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @Alexey.Solonets.

    I disagree. You don't need to introduce a local variable that references the method parameter. When the handler function is defined the parameter record is in scope and will be captured in the closure.