Results 1 to 10 of 10

Thread: Apply state after grid reconfigure

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2014
    Posts
    1

    Default Apply state after grid reconfigure

    I need to apply state to grid columns after grid reconfigure.
    I have like 10 persistent columns and I am adding or removing
    3-4 new columns with reconfigure.

    How to preserve state of old columns, like width, order or visibility?

    applyState is not working as espected

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

    Default

    Hard for me to say without seeing how you are using it. Can you share your grid config?

  3. #3
    Sencha User
    Join Date
    Sep 2015
    Posts
    36

    Default

    I have a similar problem. There is not much about my code but the reported problem occurs here too. If I post the body if the afterrender event inside the initComponent function, the state is applied correctly. Everything that happens after initialization doesn't work anymore.

    I'm quite surprised that this hasn't been implented yet. I can image there are many applications that need to store the user's grid configuration (filter, group, sort, visible columns) and apply them on the fly (for instance through the use of a combobox).

    Is there any way to achieve this?

    Code:
    listeners: {
                        'afterrender': function (grid) {                        
                            grid.applyState(Ext.decode("{\"height\":601,\"columns\":[{\"text\":\" \",\"dataIndex\":\"\",\"hidden\":false},{\"text\":\"Importance\",\"dataIndex\":\"Importance\",\"hidden\":false,\"flex\":1},{\"text\":\"Category\",\"dataIndex\":\"Category\",\"hidden\":false,\"flex\":1}],\"sort\":null}"));
                        },

  4. #4
    Sencha Premium User
    Join Date
    Sep 2015
    Location
    Europe
    Posts
    9

    Default

    I face a similar problem with the grid's 'applyState' function.

    I basically initialize a tree panel with a store and only 1 column to start with. Depending on the necessary AJAX calls I need to do, I get a list of a few fields (columns) that I use to reconfigure the grid with at first and apply the state to these afterwards (to resize, reorder, hide them depending on user's settings in another page).

    Code:
    reconfigureGrid: function(columns) {
        var stateProvider = Ext.state.Manager.getProvider();
        var grid = this.getView();
        // reconfigure with generated columns at first
        grid.reconfigure(null, columns);
        ...
    Afterwards, I get the state object and map its stateIds to the ones from the grid columns.
    Code:
        ...
        // clear the grid's state
        stateProvider.clear(grid.stateId);
        var state = stateProvider.get(grid.stateId);
        if (state) {
            this.mapStateIds();
             ...
    and in the same if-clause I apply the state object to the grid:
    Code:
             ...
            grid.applyState(state);
        }
    The state gets applied to the grid's columns, but there seems to be some problem with the hidden columns from the state.columns config:

    Columns that were shown in the grid and should now be hidden by the state object, are technically hidden ('hidden' property is true and grid's visibleColumnManager doesn't contain them), but are still rendered and visible. They are all stacked up and overlap on the very first grid column.

    Without any columns hidden:

    colBug1.png


    The column 'Po Box' should get hidden by the state object (which a user can do on another page), but gets placed in the first row, overlapping the 'rownumberer' column and the 'ID' column.
    colBug2.png


    I was debugging in the internal functions and I think it gets caused somewhere when applying the state columns to the headerCt, which then adds the columns to itself:

    (Ext.panel.Table - applyState):
    Code:
    if  (columns) { 
        me.headerCt.applyColumnsState(columns); 
    }
    
    (Ext.grid.header.Container - applyColumnsState):
    Code:
    if (moved) {
        me.removeAll(false); 
        me.add(newOrder); 
        me.purgeCache();
    }
    
    There in the add() function the items get added to the headerCt, but it's only visible (that the columns that should be hidden are overlapping others) after the layout is updated:

    (Ext.container.Container - add):
    Code:
    // We need to update our layout after adding all passed items
    // Unless we only added floating items.
    if (needsLayout) {
        me.updateLayout();
    }
    
    Note: if the columns, that should be hidden by applying the state, are manually (via column menu or in the code) shown first and then hidden again, they behave the same as usual/expected.

  5. #5
    Sencha Premium User
    Join Date
    Sep 2015
    Location
    Europe
    Posts
    9

    Default

    any news from the ExtJS Dev team on this ?

  6. #6
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default

    It's easy reproduce. It's still happening in 6.2.0, and the workaround is to call updateLayout just after applyState like:
    Code:
    grid.applyState(state);
    grid.updateLayout();

  7. #7
    Sencha Premium User
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    122
    Answers
    1

    Default

    Quote Originally Posted by SebTardif View Post
    It's easy reproduce. It's still happening in 6.2.0, and the workaround is to call updateLayout just after applyState like:
    Code:
    grid.applyState(state);
    grid.updateLayout();
    We just fell over this issue in 6.2.1. Unfortunately your workaround doesn't work, when the column order is different in state!



    As you can see in the fiddle it's not even a problem with reconfigure. It's an issue with applyState and hidden columns in general.

  8. #8
    Sencha Premium User
    Join Date
    Sep 2015
    Location
    Europe
    Posts
    9

    Default

    Quote Originally Posted by mhenn View Post
    We just fell over this issue in 6.2.1. Unfortunately your workaround doesn't work, when the column order is different in state!



    As you can see in the fiddle it's not even a problem with reconfigure. It's an issue with applyState and hidden columns in general.

    Yeah we used a similar workaround since our confirmation of the bug (over 1.5 years ago) of manually checking the 'hidden' state and also applying it manually, but it seems to be working also without suspending/resuming the Layout:

    Code:
    grid.applyState(state);
    var cols = grid.getColumns();
    for (var i = 0; i < cols.length; i++) {
        var c = cols[i];
        if (c.hidden) {
            c.show();
            c.hide();
        }
    }
    Probably a minor priority bug, but sad to hear it's still present in 6.2.1

  9. #9
    Sencha Premium User
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    122
    Answers
    1

    Default

    Quote Originally Posted by exoRA View Post
    Yeah we used a similar workaround since our confirmation of the bug (over 1.5 years ago) of manually checking the 'hidden' state and also applying it manually, but it seems to be working also without suspending/resuming the Layout:

    Code:
    grid.applyState(state);
    var cols = grid.getColumns();
    for (var i = 0; i < cols.length; i++) {
        var c = cols[i];
        if (c.hidden) {
            c.show();
            c.hide();
        }
    }
    Probably a minor priority bug, but sad to hear it's still present in 6.2.1
    It's definitely working without suspending/resuming layout, but suspending and resuming makes the showing and hiding only being rendered once all is finished, so it's faster and no flicker is visible for the user. This behaviour is even still reproducable on ExtJS 6.5.1.

  10. #10
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    33

    Default

    This bug is still reproducible in ExtJS 7.0

Similar Threads

  1. Replies: 3
    Last Post: 22 Jan 2016, 1:14 AM
  2. Apply State manually
    By nicholasnet in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 19 Jan 2016, 8:44 AM
  3. Applying state on Grid Reconfigure
    By vasanthatextjs in forum Ext: Q&A
    Replies: 3
    Last Post: 18 Sep 2012, 4:01 AM
  4. Replies: 4
    Last Post: 4 Sep 2012, 6:47 AM
  5. [OPEN] [2.0] Bugs with reload of state after reconfigure
    By xor in forum Ext 2.x: Bugs
    Replies: 11
    Last Post: 4 Jan 2008, 12:17 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
  •