Results 1 to 9 of 9

Thread: combo cell editor not working for columns after horinzontal scrolling

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    242

    Exclamation combo cell editor not working for columns after horinzontal scrolling

    REQUIRED INFORMATION


    Ext version tested:
    • ExtJS 4.2.1


    Browser versions tested against:
    • IE 10


    Description:
    • Unable to edit columns having combo editor, If columns comes after the horizontal scroll


    Test Case:

    Code:
    Ext.onReady(function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone','work'],
            data: {
                'items': [{
                    "name": "Lisa",
                    "email": "[email protected]",
                    "phone": "555-111-1224",
                  	"work": 0
                }, {
                    "name": "Bart",
                    "email": "[email protected]",
                    "phone": "555-222-1234",
                  	"work": 2
                }, {
                    "name": "Homer",
                    "email": "[email protected]",
                    "phone": "555-222-1244",
                 	 "work": 1
                }, {
                    "name": "Marge",
                    "email": "[email protected]",
                    "phone": "555-222-1254",
                  	"work": 0
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    
        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                header: 'Name',
                width: 100,
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                width: 100,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }, {
                header: 'Work',
                dataIndex: 'work',
                width: 130,
                editor: {
                    xtype: 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        [0,'Engineer'],
                        [1,'Doctor'],
                        [2,'Lawyer']
                    ],
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                }
            }],
            selType: 'cellmodel',
            plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })],
            height: 200,
            width: 200,
            renderTo: Ext.getBody()
        });
    });
    Steps to reproduce the problem:
    • Try to edit Work Column values


    The result that occurs instead:
    • Focus shifts to the first column


    Extra Info:
    • Works fine for ExtJS 4.2.0

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    I can't reproduce this on the latest nightly. Can you confirm?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    242

    Exclamation

    ok! I try to elaborate more on How to reproduce?

    Step 1. Using Windows Machine and IE 10 browser

    Step 2. Trying above given code inside code editor of sencha doc or sencha try

    Step 3. Try editing work column values. First time It goes into combo edit mode.. Fine!

    Step 4. But if you try again editing another cell of that work column.

    Observe: Grid view resets to first Column.

    other observations:
    1) It works fine if Work is first column instead.
    2) It works fine for 4.2.0
    Attached Images Attached Images

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    I afraid I can't recreate this either. Tried with IE10 in both Windows 7 and Windows 8.

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    No wait, I got it, in both Windows 7 and Windows 8. You have to finish the edit using a click in another cell. Using 'enter' key doesn't trigger the issue.

    That said, I tested against the latest nightly build and this is no longer an issue as of 4.2.2.1093. True for both Windows 7 and Windows 8.

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    242

    Question Could you please provide some fix

    Thank God you could reproduce..
    I thought I will have to share a video Please change the status of the bug.
    Could you provide some fix? Some method I could override to fix this issue in 4.2.1?
    Thanks

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    The status of the bug is still NOREPRO because it can't be reproduced in the latest version. As far as a workaround, 4.2.2 is due out this month (always subject to delay) so the fix is on the horizon. I don't know what update fixed this issue, so unfortunately I can't point you in the right direction. If you really need something fast, I suppose you could compare the latest nightly against 4.2.1 and try to construct an override, or hope that someone else drops by and posts one.

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    242

    Lightbulb one possible work around

    I got little closer to bug cause.
    Printing cellIndex value on cellmouseup and cellmousedown events
    Code:
    Ext.onReady(function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone','work'],
            data: {
                'items': [{
                    "name": "Lisa",
                    "email": "[email protected]",
                    "phone": "555-111-1224",
                  	"work": 0
                }, {
                    "name": "Bart",
                    "email": "[email protected]",
                    "phone": "555-222-1234",
                  	"work": 2
                }, {
                    "name": "Homer",
                    "email": "[email protected]",
                    "phone": "555-222-1244",
                 	 "work": 1
                }, {
                    "name": "Marge",
                    "email": "[email protected]",
                    "phone": "555-222-1254",
                  	"work": 0
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    
    
        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                header: 'Name',
                width: 100,
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                width: 100,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }, {
                header: 'Work',
                dataIndex: 'work',
                width: 130,
                editor: {
                    xtype: 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        [0,'Engineer'],
                        [1,'Doctor'],
                        [2,'Lawyer']
                    ],
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                }
            }],
            selType: 'cellmodel',
            plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })],
            height: 200,
            width: 200,
            listeners: {
                cellmouseup: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
                    console.log(cellIndex);
                },
                cellmousedown: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
                    console.log(cellIndex);
                }
            },
            renderTo: Ext.getBody()
        });
    });
    Try This:
    Step 1: Click 1st Row's Work Column
    Console Output: 3 and 3 (Perfect)
    Step 2: Click 2nd Row's Work Column
    Console Output: 3 and 0 (Oops)

    It looks like cellmouseup event is giving wrong column index.
    So I used cellmousedown event to manually start cell editing.
    Code:
    Ext.onReady(function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone','work'],
            data: {
                'items': [{
                    "name": "Lisa",
                    "email": "[email protected]",
                    "phone": "555-111-1224",
                  	"work": 0
                }, {
                    "name": "Bart",
                    "email": "[email protected]",
                    "phone": "555-222-1234",
                  	"work": 2
                }, {
                    "name": "Homer",
                    "email": "[email protected]",
                    "phone": "555-222-1244",
                 	 "work": 1
                }, {
                    "name": "Marge",
                    "email": "[email protected]",
                    "phone": "555-222-1254",
                  	"work": 0
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    
    
        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                header: 'Name',
                width: 100,
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                width: 100,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }, {
                header: 'Work',
                dataIndex: 'work',
                width: 130,
                editor: {
                    xtype: 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        [0,'Engineer'],
                        [1,'Doctor'],
                        [2,'Lawyer']
                    ],
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                }
            }],
            selType: 'cellmodel',
            plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })],
            height: 200,
            width: 200,
            listeners: {
                cellmousedown: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
                    grid.editingPlugin.startEditByPosition({row: rowIndex, column: cellIndex});
                    return false;
                }
            },
            renderTo: Ext.getBody()
        });
    });
    And now it works perfectly
    Thanks.

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Glad you found a workaround! Thanks for sharing it with the community.

Tags for this Thread

Posting Permissions

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