Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Row Editor Plugin: Headers Don't Scroll Horizontally With Editor Fields in Firefox

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-21248 in 6.2.1.167.
  1. #1

    Default Row Editor Plugin: Headers Don't Scroll Horizontally With Editor Fields in Firefox

    We are developing an application that uses of the Row Editor grid plugin for most screens. We have a number of screens with wide grids that extend beyond the viewing area. When you use the grid's horizontal scrollbar, the column headers scroll in synch with the editor fields. However, if you tab through the fields,the column headers remain fixed while the editor fields scroll to the right.

    I've tested the app in three different browsers. The problem does not occur in IE 11. The problem occurs intermittently in Chrome. The problem is always present in Firefox 46.1.

    I've created the following fiddle to demonstrate the problem: https://fiddle.sencha.com/#fiddle/1ad7

    Testing the fiddle works fine in IE 11 and Chrome, however, the scrolling problem is present in Firefox 46.1.

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

    Default

    This seems like a bug. I'll move the thread to the Bugs forum.

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

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha Premium User
    Join Date
    Sep 2013
    Posts
    4

    Default

    This is a brutal bug. So far I have discovered that by firing the fireScroll event on the "scrollable" we can get the view to scroll, but it doesn't get the scroll bar on the grid to update. To play around with this you can use the following chain of calls:


    PHP Code:
    Ext.getCmp('<PUT AN ID ON YOUR GRID>').getPlugin('<pluginsid>').editor.activeField.column.getView().getScrollable().fireScroll(400,0); 
    ^Not PHP code.

  5. #5
    Sencha Premium User
    Join Date
    Sep 2013
    Posts
    4

    Default Fix for Classic RowEditor

    There is definitely a problem with the RowEditor.js onFieldTab method (found in ext/classic/classic/src/grid). To fix the tab issue we extended the RowEditing plugin and the RowEditor UI component modifying only the onFieldTab method within RowEditor.js with the following method

    PHP Code:

    onFieldTab
    : function(e) {
            var 
    me this,
                
    activeField me.activeField,
                
    rowIdx me.context.rowIdx,
                
    forwards = !e.shiftKey,
                
    target activeField[forwards 'nextNode' 'previousNode'](':focusable'), 
                
    width_to_scroll;


            
    //on field tab, we force a scroll of position only if we have a target.
            
    if(target){
                
    width_to_scroll activeField.column.width;
                
    activeField.column.getView().getScrollable().scrollBy(width_to_scroll);
            }

            
    // No field to TAB to, navigate forwards or backwards
            
    if (!target || !target.isDescendant(me)) {
                
    // Tabbing out of a dirty editor - wrap to the update button
                
    if (me.isDirty()) {
                    
    e.preventDefault();
                    
    me.floatingButtons.child('#update').focus();
                } else {
                    
    // Editor is clean - navigate to next or previous row
                    
    rowIdx rowIdx + (forwards : -1);
                    if (
    rowIdx >= && rowIdx <= me.view.dataSource.getCount()) {

                        if (
    forwards) {
                            
    target me.down(':focusable:not([isButton]):first');

                            
    // If going back to the first column, scroll back to field.
                            // If we're in a locking view, this has to be done programatically to avoid jarring
                            // when navigating from the locked back into the normal side
                            
    activeField.column.getView().getScrollable().scrollIntoView(activeField.ownerCt.child(':focusable').el);
                        } else {
                            
    target me.down(':focusable:not([isButton]):last');
                        }
                        
    me.editingPlugin.startEdit(rowIdxtarget.column);
                    }
                }
            }
        }, 
    Enjoy!

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

    Default

    Thanks for sharing your solutions with the community!

  7. #7
    Sencha Premium User
    Join Date
    Sep 2013
    Posts
    4

    Default

    ***Update 1/6/2017***

    I made the post below in reference to another issue with the row editor (pointed out by miroperez). When you have a wide grid with a horizontal scroll bar, scrolling to the far right and clicking in a cell to start an edit, the column headers do not match the cell contents. To fix THIS issue you can apply the fix below, however this is unrelated to the fieldTab problem, please see the solution above in regards to overriding the onFieldTab method. Leaving the post here in case anyone encounters the same issue.

    *************


    Alright - I'm back - I realized I didn't update this defect with the most recent fix we developed - slightly less painful than the last fix! Whoop! We tied into the beforeedit of the row editor and called the function below. Using this approach does require you to store "x" position of the rowEditor from the last beforeGridEdit event somewhere (for us we are using an app variable stored in a "runtime" store)

    PHP Code:
    /**
     * Function disables the add button to prevent a second add
     * while the first is not yet cancelled or submitted
     * @param editor
     * @param context
     * @param eOpts
     */
    beforeGridEdit: function (editorcontexteOpts) {
        var 
    view this.view,
            
    allocation_id context.record.data.allocation_id;

        
    view.down('#addbest').setDisabled(true);

        
    //we only want to do this for edits, not adds so we check if allocation_id is empty
        //which is the unique identifier for each allocation
        
    if(allocation_id !== ''){
            
    this.checkOnPluginPosition(editor);
        }

    },

    /**
     * Function is responsible for scrolling our
     * editor plugin if needed
     * @param plugin
     */
    checkOnPluginPosition: function(plugin){
        var 
    n_plugin_x plugin.view.getScrollable().position.x,
            
    runtime Ext.getStore('runtime').getAt(0),
            
    r_plugin_x runtime.data['plugin_x'];


        if (
    typeof r_plugin_x === 'undefined'){
            
    runtime.data['plugin_x'] = n_plugin_x;
            
    plugin.editor.getScrollable().position.n_plugin_x;
            
    plugin.view.getScrollable().scrollTo(n_plugin_x);
        } else if (
    r_plugin_x !== n_plugin_x) {
            
    plugin.editor.getScrollable().position.n_plugin_x;
            
    plugin.view.getScrollable().scrollTo(n_plugin_x);
        } else {

            
    //at times IE is not scrolling correctly so we do this catch all scenario
            
    if(Ext.isIE){
                
    plugin.editor.getScrollable().position.n_plugin_x;
                
    plugin.view.getScrollable().scrollTo(n_plugin_x);
            }
        }

    Boom! You have your fix without modifying ExtJS source files.

  8. #8

    Default

    Thank you for the solutions. I implemented your first suggestion (overriding the onFieldTab function of the Ext.grid.RowEditor) and it worked perfectly.

  9. #9
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    125

    Default

    I think I'm running in the the same issue on 6.0.2 classic. See https://fiddle.sencha.com/#view/editor&fiddle/1bb3 Tabbing forward in the row editor when there is a horizontal scrollbar to the last field then shift tabbing back to the first field the first field and first column don't align. In fact in my case I don't even see the first column, its the second column. The only way to make it realign is to move the scroll bar a little to the right then back to the left and then it's good. Looking at the above code, I'm not sure what beforeGridEvent you are referring to? I don't see it in the docs?

    I also tried the override on onFieldTab and that didn't seem to fix the issue either. It looks like they fixed the issue in 6.2.1 but we're not prepared to spend another 3 months upgrading like we did for 6.0.2.

  10. #10
    Sencha Premium User
    Join Date
    Sep 2013
    Posts
    4

    Default

    miroperez - My bad - I had a typo in the post above - it now reads "beforeedit", which is an event that the rowEditor produces (see code below). They may have changed the source code a bit for 6.0.2 so if hooking in to the rowEditor beforeedit event doesn't work, I would recommend comparing the source files between the two (6.0.0 and 6.0.2) for the classes in question.

    PHP Code:
    plugins: [
        {
            
    ptype'rowediting',
            
    pluginId'roweditorplugin',
            
    clicksToEdit2,
            
    errorSummaryfalse,
            
    listeners: {
                
    cancelEdit'removeRecordOnCancel',
                
    edit'commitChanges',
                
    beforeedit'beforeGridEdit'
            
    }
        }
    ], 
    This problem was a real bear for us so I'm happy to help get you guys past it.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: 24 Feb 2013, 12:30 PM
  2. Row Editor Plugin gives a editor of a very small width in Internet Explorer
    By Oliver Scott in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Feb 2013, 9:09 AM
  3. Replies: 0
    Last Post: 8 Aug 2011, 5:25 PM
  4. Replies: 0
    Last Post: 3 Jul 2011, 8:52 PM
  5. Editor Tree Firefox/Opera Scroll Bug
    By jsakalos in forum Ext 1.x: Bugs
    Replies: 19
    Last Post: 25 Oct 2007, 1:23 PM

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
  •