You found a bug! We've classified it as EXTJS-15270 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Aug 2013
    Location
    Chandigarh
    Posts
    11
    Vote Rating
    0
    gauravgogna is on a distinguished road

      0  

    Default Grid data is not moving with Grid header while Tabbing through Grid Header items

    Grid data is not moving with Grid header while Tabbing through Grid Header items


    ExtJs Version 4.2.1
    Browser: Chrome 37.

    Description:

    Currently I am using filtering by adding textfields in the headers of gridpanel. In grid scrollbar shows if columns do not fit in the width of grid. we can then move scrollbar using mouse to see the hidden columns, but what if I want to see the columns by using tab key selection. Here I am facing this issue. When I click on any textfield item in the header and then move to next item using tab key then it goes correctly till the columns showing in front of us, but when i click on tab key again then it moves to next item that was hidden , on pressing tab key that column header moves to left and it shows up, but column content is fixed to its earlier position. Due to this the alignment of header and data of grid not matching. I want its content to be moved to left with the header so that it will be aligned properly in each line.

    Snapshot:
    grid-mis-align.jpg

    Fiddler link: https://fiddle.sencha.com/#fiddle/c5h

    Code:
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
            
            
            Ext.define('Ext.override.form.field.Number', {
                override: 'Ext.form.field.Number',
                spinUpEnabled: false,
                spinDownEnabled: false
            });
    
    
            Ext.define('Ext.override.grid.plugin.CellEditing', {
                override: 'Ext.grid.plugin.CellEditing',
                onSpecialKey: function(ed, field, e) {
                    if (e.getKey() == 38 || e.getKey() == 40) {
                        var me = this,
                            ctx = me.context,
                            factor = (e.getKey() == 38 ? -1 : 1),
                            newRow = ctx.rowIdx + (1 * factor),
                            max = ed.grid.getStore().count();
                        if (newRow >= 0 && newRow < max) {
                            me.startEditByPosition({
                                column: ctx.colIdx,
                                row: newRow
                            });
                        }
                    }
                    this.callParent(arguments);
                }
            });
            Ext.create('Ext.data.Store', {
                storeId: 'simpsonsStore',
                fields: ['name', 'email', 'age'],
                data: {
                    'items': [{
                        "name": "Lisa",
                        "email": "lisa@simpsons.com",
                        "age": 8
                    }, {
                        "name": "Bart",
                        "email": "bart@simpsons.com",
                        "age": 10
                    }, {
                        "name": "Homer",
                        "email": "home@simpsons.com",
                        "age": 36
                    }, {
                        "name": "Marge",
                        "email": "marge@simpsons.com",
                        "age": 34
                    }]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
    
    
            Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                id: 'gridpanel1',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columnLines: true,
                columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: 'nameClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false,
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: 'emailClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Age',
                    dataIndex: 'age',
                    editor: {
                        xtype: 'numberfield',
                        hideTrigger: true,
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: 'ageClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Name',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: '1nameClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false,
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: '1emailClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Age',
                    dataIndex: 'age',
                    editor: {
                        xtype: 'numberfield',
                        hideTrigger: true,
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: '1ageClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Name',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: '2nameClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false,
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: '2emailClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }, {
                    header: 'Age',
                    dataIndex: 'age',
                    editor: {
                        xtype: 'numberfield',
                        hideTrigger: true,
                        selectOnFocus: true
                    },
                    items: [{
                        xtype: 'textfield',
                        id: '2ageClientFilter',
                        flex: 1,
                        margin: 2,
                        enableKeyEvents: true,
                        listeners: {
                            element: 'el',
                            mousedown: function (e) { e.stopPropagation(); },
                            keyup: function (e) { e.stopPropagation();  }
                        }
                    }]
                }],
                selType: 'cellmodel',
                plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1,
                    listeners: {
                        keydown: function() {
                            console.log(arguments);
                        }
                    }
                })],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        }
        
    });

  2. #2
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Posts
    25
    Vote Rating
    2
    SurenderBhyan1 is on a distinguished road

      0  

    Default


    I am also facing the same issue in Ext 4.2.1 and this can be reproduces in Ext JS 5.0.1 too
    Surender Bhyan
    Mohali



  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thank you for your test case!
    I've added your test case and additional notes to the engineering ticket (EXTJS-15270).


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  4. #4
    Sencha User
    Join Date
    Aug 2013
    Location
    Chandigarh
    Posts
    11
    Vote Rating
    0
    gauravgogna is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thanks for accepting my test case. I am looking forward to your solution.

  5. #5
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Posts
    25
    Vote Rating
    2
    SurenderBhyan1 is on a distinguished road

      2  

    Default


    Solution: Please try using scroll event on grid header item and sync it with grid scrollLeft

    https://fiddle.sencha.com/#fiddle/cgg

    Code:
    //Sync header item scroll with Grid 
            
                myGrid.headerCt.el.on('scroll', function() {
                myGrid.getView().el.dom.scrollLeft = myGrid.headerCt.el.dom.scrollLeft;
            });

    Enjoy
    Surender Bhyan
    Mohali



  6. #6
    Sencha User
    Join Date
    Aug 2013
    Location
    Chandigarh
    Posts
    11
    Vote Rating
    0
    gauravgogna is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thanks for your suggestion. It works for me. +1 for you.

  7. #7
    Sencha User
    Join Date
    Jun 2014
    Posts
    1
    Vote Rating
    0
    madhavimanthena is on a distinguished road

      0  

    Default


    It Worked for me .. Thanks !!!

  8. #8
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Posts
    25
    Vote Rating
    2
    SurenderBhyan1 is on a distinguished road

      0  

    Default


    Quote Originally Posted by madhavimanthena View Post
    It Worked for me .. Thanks !!!
    Sounds great
    Surender Bhyan
    Mohali