Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    40
    Vote Rating
    0
    The0s is on a distinguished road

      0  

    Default [OPEN-680] DateField tab blur failure when inside RowEditor

    [OPEN-680] DateField tab blur failure when inside RowEditor


    First of all, what is the policy about reporting bugs from classes from the ux namespace which have the ext copyright is in the header? Is this the right place?
    Anyways:

    Setup:
    3.1.1 / ext-adapter / no custom css / firefox 3.5.8 / XP pro

    Description:
    When tabbing through a row of inputs using Ext.ux.grid.RowEditor, inputs of type Ext.form.DateField do not lose focus when tabbing to the next field. Left clicking on a field will assert the correct focus state for all the inputs, however.

    Test:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
           
            <title id='title'>Title</title>
    
            <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
            <link rel="stylesheet" type="text/css" href="../../ux/resources/css/row-editor.css">
             
            <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../ext-all-debug.js"></script>
            <script type="text/javascript" src="../../ux/grid/RowEditor.js"></script>
            
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
     
            Ext.onReady(function(){
     
              var store = new Ext.data.ArrayStore({
                fields:[   
                  {name: 'first', type:'string'},
                  {name: 'period_start', type:'date'},
                  {name: 'period_end', type:'date'},
                  {name: 'last', type:'string'}
                ],
                data:[
                  ['foo',new Date(),new Date(),'bar'],
                  ['foo',new Date(),new Date(),'bar'],
                  ['foo',new Date(),new Date(),'bar'],
                  ['foo',new Date(),new Date(),'bar'],
                ]       
              }); 
              
              var editor =  new Ext.ux.grid.RowEditor({
                clicksToEdit:2,
                monitorPoll:1000
                
              });
              
              var tf1 = new Ext.form.TextField({id:'tf1'});
              var tf2 = new Ext.form.TextField({id:'tf2'});
              var df1 = new Ext.form.DateField({id:'df1'});
              var df2 = new Ext.form.DateField({id:'df2'});
              
    
              var fn = function (field) { console.log(field.id +' blur'); }
              tf1.addListener('blur', fn);
              tf2.addListener('blur', fn); 
              df1.addListener('blur', fn);
              df2.addListener('blur', fn);         
            
              var grid = new Ext.grid.GridPanel({     
                  frame: true,
                  store: store,
                  plugins:[editor],
                  columns: [{
                    dataIndex:'first',
                    header:'FIRST', 
                    editor: tf1
                  },{
                    dataIndex:'period_start', 
                    header:'PE', 
                    xtype: 'datecolumn', 
                    editor: df1
                  },{
                    dataIndex:'period_end',
                    header:'PS', 
      
                    xtype: 'datecolumn', 
                    editor: df2
                  },{
                    dataIndex:'last', 
                    header:'LAST', 
                    editor: tf2
                  }]
              });  
              
              var view = new Ext.Viewport({
                layout:'border',
                items:[{
                  region:'center',
                  layout:'fit',
                  items:[grid]
                }]
              });
            }); 
            </script> 
        </head>
        <body>
        </body>
    </html>
    Reproduction:
    1) double click on a row
    2) select the first input.
    3) tab through all the inputs.
    4) look at firebug and see that only the TextFields fire a 'blur' event from the tabbing.

    I logged to console on blur to test each input. You can also test visually by seeing that the 'focus' graphics of the DateField are still active even though its not really the active field (eg, both date fields have focus graphics)

    Expected Result:

    firebug console:
    Code:
    tf1 blur
    df1 blur
    df2 blur
    tf2 blur
    Actual:
    Code:
    tf1 blur
    tf2 blur
    Screenshots:
    Screenshot006 is step 1, Screenshot007 is step 4




    Debugging already done:
    This is not issue does not occur when using an EditorGridPanel, or DateFields inlined into a panel.

    Debugging update:
    It seems that the RowEditor pulls the Editors it uses from the GridPanel using getEditor(). These editors are instances of GridEditor, which assert control of tab behavior of the field via the private monitorTab attribute (see Ext.grid.GridEditor constructor). This is fine for an EditorGrid, since it handles the tab behavior by passing such tab events to it's column selection model via SelectionModel.onEditorKey(), but RowEditor does not do any such selection logic. I do not fully understand the functionality of monitorTab on certain Field types since its not documented, but the below code seems to fix this problem.

    Crappy workaround (prolly will break other stuff):
    RowEditor.js, somewhere around line 281
    Code:
    if(ed instanceof Ext.form.TriggerField)
      ed.monitorTab = true;
    this.insert(i, ed);
    Attached Images
    Last edited by The0s; 3 Mar 2010 at 2:08 PM. Reason: update and crappy workaround

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    UX components are considered experimental, bugs opened on them are usually a low priority and are categorized separately in our database.

Thread Participants: 1