Results 1 to 5 of 5

Thread: Grid in cellEdit mode. Blur event not detected on tabbing out

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    60
    Vote Rating
    0
      0  

    Default Grid in cellEdit mode. Blur event not detected on tabbing out

    I have a grid in cellEdit mode. I need to detect when an edit cell is losing focus (blur event). On textfield and textarea type columns, blur event is detected when you either tab out of the edit cell or you click on another cell. In numberfield, datefield and combobox type columns, the blur event is detected when you click another cell but is not detected when you tab out of the cell.
    To make things worse, after you tab thru few of this kind columns and nothing happens, you click on another cell instead of tabbing out, all the blur events for the fields you tabbed before are fired together.

    To reproduce, try this grid. Try to exit edit field either by clicking on other cells or tabbing out and look at the console.

    Ext.onReady(function() {
    Ext.QuickTips.init();


    // sample static data for the store
    var myData = [
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar'],
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Shai', 'Inbar']
    ];




    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
    fields: [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
    'shai',
    'inbar'
    ],
    data: myData
    });


    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columnLines: true,

    columns: [
    {
    text : 'Company',
    width : 100,
    sortable : false,
    dataIndex: 'company',
    editor: {
    xtype: "textfield",
    allowBlank: false,
    listeners: {
    blur: {
    scope: this,
    fn: function(fld){
    console.log('Company field blurred')
    }
    }
    }
    }
    },
    {
    text : 'Price',
    width : 75,
    sortable : true,
    dataIndex: 'price',
    editor: {
    xtype: "numberfield",
    allowBlank: false,
    listeners: {
    blur: {
    scope: this,
    fn: function(fld){
    console.log('Price field blurred')
    }
    }
    }
    }
    },
    {
    text : 'Change',
    width : 75,
    sortable : true,
    dataIndex: 'change',
    editor: {
    xtype: "numberfield",
    allowBlank: false,
    listeners: {
    blur: {
    scope: this,
    fn: function(fld){
    console.log('Change field blurred')
    }
    }
    }
    }
    },
    {
    text : '% Change',
    width : 75,
    sortable : true,
    dataIndex: 'pctChange',
    editor: {
    xtype: "numberfield",
    allowBlank: false,
    listeners: {
    blur: {
    scope: this,
    fn: function(fld){
    console.log('Percent change field blurred')
    }
    }
    }
    }
    },


    {
    text : 'Last Updated',
    width : 85,
    sortable : true,
    dataIndex: 'lastChange',
    editor: {
    xtype: "datefield",
    allowBlank: false,
    listeners: {
    blur: {
    scope: this,
    fn: function(fld){
    console.log('Last update field blurred')
    }
    }
    }
    }
    },
    {
    text : 'Name 1',
    width : 100,
    sortable : false,
    dataIndex: 'shai',
    editor: {
    xtype: "textfield",
    allowBlank: false
    }
    },
    {
    text : 'Name 2',
    width : 100,
    sortable : false,
    dataIndex: 'inbar',
    editor: {
    xtype: "textfield",
    allowBlank: false
    }
    }

    ],

    height: 350,
    width: 600,
    title: 'Grouped Header Grid',
    renderTo: 'tcontainer',
    viewConfig: {
    stripeRows: true
    },
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
    })]


    });


    });

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Vote Rating
    129
      0  

    Default

    please use code tags to preserve the formatting, otherwise it is a pain for us to read it.

    do you want me to remove this to the bugreport forum?
    Best regards
    Tobias Uhlig

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    60
    Vote Rating
    0
      0  

    Default Move it to bugs repeort

    Sure, if it is a bug and not that I was doing something wrong.

    What do you mean using code tags?

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    404
      0  

    Default

    This article explains how to post the code: http://www.sencha.com/learn/legacy/E..._code_properly

    I'm moving this thread to Bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    16
    Vote Rating
    0
      0  

    Default

    Any news on this thread? How did you manage with this problem?

    Have the same problem in 4.1.1...
    Thanks in advance!

Posting Permissions

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