Results 1 to 3 of 3

Thread: ExtJS 4.2.2 - Grid state issue with multiple grids of the same type

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Vote Rating

    Default ExtJS 4.2.2 - Grid state issue with multiple grids of the same type

    ExtJS seems to generate IDs for grid headers in the format "header-####." Every time a different grid is loaded, these numbers are incremented. The column information stored in the state refers to this exact ID.

    For example, I load a grid of personnel on my page, The three headers, Name, Position, Email Address get the ids header-1020, header-1021, and header-1022 respectively. I change the column widths and the state is stored in the cookie referencing these three ids. Next time I open my application, I first go to the list of Vendors. The header ids are generated in the 1000's. I then navigate to Personnel, and all of a sudden my headers for Name, Position and Email are now 2020, 2021, 2022. The state does not get restored because these ids don't match the 1020, 1021, and 1022 stored in the state.

    This can be demonstrated at the following JSFiddle:

    If you change the widths of the column headings and then reload the page, the widths will be maintained. Clicking the button will cause the grid to be destroyed and recreated. The header ids will be regenerated and won't match what is stored in the state, so the columns will not maintain their widths when the grid is recreated.

    I understand that this can be resolved by hard coding an id for each column, but this can cause problems if the same id is used in multiple grids, such as a column called "name," or if the same grid is displayed multiple times on a page.

    Please advise.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Vote Rating


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

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2013
    Vote Rating

    Default two possible fixes

    I have encountered the same issue. Thing is that state works between refreshes but in case of single page app when you are recreating and destroying the same grid it does not work, reason is header column Ids are different with every re-create which causes a miss match with the id stored in state. Here are two fixes for the issue:

    1) when you define column define stateId for each column, works fine with no issues but you have to put it for every column.
    2) you override the function which gets the stateId for column to save locally. If you copy past the following in the fiddle above, it will resolve the issue:

    getStateId: function () {
    return this.stateId || this.dataIndex || this.headerId;

    the only difference from original function is || this.dataIndex being second preference.

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