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

Thread: several issues with Grid component

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-25268 in 6.5.1.345.
  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default several issues with Grid component

    Hi,

    I started evaluating the ExtReact and found several issues with the Grid component. I understand it is a fresh release and bugs are expected but wanted to give you heads-up on what I found so far:

    1. Grouping does not work at all. I used the bootstrap repo and choosing 'Group by this field' menu has no effect. Also, in the Grouping example it works but you cannot ungroup a column once it is grouped. Choosing 'Show in groups' does not do anything (it is checked when clicked but has no effect).

    2. Sorting by column behaves erratically. If you click on 'Sort Ascending' Once it works. But then clicking on the same menu multiple times just removes the Up arrow and never puts it back. Even clicking on 'Sort Ascending' on a different column after that has no effect. It only resets it if you click 'Sort Descending' on any column menu.

    Thank you,
    Yuri

  2. #2
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    Hi Yuri,

    Thank you for the feedback. We're working on the next update, v6.5.1 right now. We'll incorporate this feedback in our backlog.

  3. #3
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    Other grouping issues:

    1. Setting groupable to false on a column has no effect. Grouping menus are not hidden. 'Group by this field' is not disabled and selecting it groups the grid by that field.
    2. Setting grouped to false on the grid itself does not remove grouping menus from columns and 'Group by this field' menu is still enabled.

  4. #4
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    I found why the 'Show in groups' menu click does not remove the column from grouping. Code is in the Column.js:

    Code:
    onToggleShowInGroups: function (menuItem) {
            if (!menuItem.getChecked()) {
                var grid = this.getGrid(),
                    store = grid.getStore();
    
                store.setGrouper(null);
            }
        },
    
    The highlighted line should be:

    if (menuItem.getChecked()) {

    because when the column is grouped the checkbox is checked.

    Please fix it!

  5. #5
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

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

  6. #6
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    Yep, that seems to fix it alright. Until 6.5.1 comes out, you can apply that fix to your app in an override, just like you would with Ext JS. If you're using the boilerplate, you can add a file called to ext-react/overrides (the name of the file doesn't matter) with the following code:

    Code:
    Ext.define('ExtReact.override.ColumnGroupFix', {
        override: 'Ext.grid.column.Column',
    
        onToggleShowInGroups: function (menuItem) {
            if (menuItem.getChecked()) {
                var grid = this.getGrid(),
                    store = grid.getStore();
    
    
                store.setGrouper(null);
            }
        }
    });
    The location of overrides is configured via the ExtReactWebpackPlugin:
    http://docs.sencha.com/extreact/6.5....el_-_overrides


  7. #7
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default Bug fix for sorting issues in grid

    I was able to identify the bugs related to sorting too (Grid modern toolkit, ExtReact)

    Problem 1. In any column menu select 'Sort ASC'. Up arrow appears in the column. Select 'Sort ASC' again. The up arrow disappears. Selecting 'Sort ASC' again any number of times will not result in sorting and will be ignored by the grid.

    Problem 2. Click on the column header 1. Column 1 is sorted ASC. Click on the column header 2. Column 2 is sorted ASC and column 1 is not sorted. Click on the column header 1 again. Column 1 is sorted DESC which is wrong (it should not remember what was the previous sort order and in your Ext classic toolkit grid it works as expected).

    Here's where you have to make changes in your code to fix both of these (node_modules/@extjs/ext-react-toolkit/src/grid/column/Column.js):

    Code:
    onSortDirectionToggle: function (menuItem) {
            var me = this,
                grid = me.getGrid(),
                store = grid.getStore(),
                sorter = me.getSorter(),
                sorters = store.getSorters(),
                isSorted = sorter && (sorters.contains(sorter) || sorter === store.getGrouper()),
                direction = menuItem.direction;
    
            // Remove sorter on uncheck if its the matching direction
            if (isSorted && sorter && sorter.getDirection() === direction) {
                sorters.remove(sorter);
    
                // Store will not refresh in response to having a sorter removed, so we must
                // clear the column header arrow now.
                me.setSortState(null);
            }
            else {
                // If have no sorter, or store is not sorting by that sorter, or the sorter
                // is opposite to what we just checked then sort according to the CheckItems's
                // direction
                if (!isSorted || sorter.getDirection() !== direction) {
                    me.sort(direction);
                }
            }
        }
    

    Code:
     sort: function (direction) {
                var me = this,
                    sorter = me.getSorter(),
                    grid = me.getGrid(),
                    store = grid.getStore(),
                    isSorted = sorter && store.getSorters().contains(sorter);
    
                // This is the "group by" column - we have to set the grouper and tellit to recacculate.
                // AbstractStore#group just calls its Collection's updateGrouper if passed a Grouper
                // because *something* in the grouper might have changed, but the config system would
                // reject that as not a change.
                if (store.isGrouped() && store.getGroupField() === me.getDataIndex()) {
                    sorter = store.getGrouper();
                    me.setSorter(sorter);
                    if (sorter.getDirection() !== direction) {
                        sorter.toggle();
                        store.group(sorter);
                    }
                    return;
                }
    
                if (isSorted && sorter) {
                    // Our sorter is in the requested direction
                    if (sorter.getDirection() === direction) {
                        // If it is applied, we've nothing to do
                        if (isSorted) {
                            return;
                        }
                    } else {
                        me.oldDirection = sorter.getDirection();
                        sorter.toggle();
                    }
                } else {
                    me.setSorter({
                        property: me.getSortParam(),
                        direction: direction
                    });
                    sorter = me.getSorter();
                }
    
                // If the sorter is already applied, just command the store to sort with no params.
                // If the grid is NOT configured with multi column sorting, then specify "replace".
                // Only if we are doing multi column sorting do we insert it as one of a multi set.
                store.sort.apply(store, isSorted ? [] : [sorter, grid.getMultiColumnSort() ? 'multi' : 'replace']);
            },
    
    Please let me know if this makes sense.

    Thank you,
    Yuri

  8. #8
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    Hi,

    Any response to the last post?

    The fix in both sections of code is in bold.

    Thank you,
    Yuri

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Hi geniny, thanks for bringing this to our attention, and thanks for digging in a bit!

    We will certainly fix this in our next maintenance release.

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    OK, this is what we are proposing. Three states. ASC, DESC and no sorter on that data field.

    The header cycles through in that order on clicks. The menu items are mutually exclusive checkboxes. Both sorting UIs will stay in sync

    It works like this:


Page 1 of 2 12 LastLast

Similar Threads

  1. JAM component installation issues
    By gkatz in forum Sencha Touch 2.x: Examples and Showcases
    Replies: 34
    Last Post: 11 Oct 2013, 9:21 AM
  2. Component Ids are Global ? and other issues...
    By mrpo in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 2 Nov 2011, 9:42 AM
  3. FormPanel - Component Rendering issues
    By Jack_S in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 29 Dec 2008, 4:56 AM
  4. Issues with Order of Component Events
    By CutterBl in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 1 Aug 2008, 1:38 PM

Posting Permissions

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