Creating a stateful grid with reconfigure in ExtJS

Question

We've been trying to achieve this for some days now but it seems impossible.

Is there a way to create a Stateful grid (i.e. saving the state of the columns etc.) while at the same time loading the data with reconfigure: true?

Essentially what we have is a combobox that decides what columns the grid has.

We want the user to be able to customize the grid's appearance for each of those combobox choices. Whenever the combobox value changes we load the grid with reconfigure: true to bring different columns in. However we have no idea how to save the state for those columns.

The state is saved in a database with a stateId that depends on the combobox choice so that we know which configuration we're looking at and what state to load depending on the combo choice. But from what we've come to understand, the state gets applied first, then the reconfigure so it always messes the state.

Anyone has any ideas about this?

If you don't exactly understand what I'm trying to do ask so I can elaborate more.

EDIT: We found out some stuff about how all this process works but still no answer. We're gonna try to edit the core code of ExtJS but we'd prefer to find a different solution.

Right now when you create a stateful reconfigurable grid this is what happens: 1. The Grid gets created 2. The state gets applied (the one from the database) 3. The grid gets rendered but since it has no data/columns it has an 'empty' state 4. This state gets saved back (essentially ruining our original correct state) 5. The store gets loaded and the columns get added but there is a partial rendering (the grid itself doesn't get re-rendered). 6. The state now is the default one with the columns and it gets saved back to the database

Even manually applying a state does nothing since it doesn't get rendered. We've tried many 'rendering' options but nothing seems to work. Any ideas?

Editing a question doesn't help. Answering it does. We all understand what is asked a couple of <br>s and <b>s won't change anything — PentaKon
Sometimes, having someone edit the question for clarity can help someone else understand the question better and be more able to supply an answer. It looks like the one answer came only after the editing, so maybe that actually did make the difference. Try not to get angry at someone who tries to help, but doesn't help in the way you wanted them to. — David Navarre
Sure formatting a question in a better way might be done as an act of trying to help, but we all know generally that's not the case. No one drops around, checks to see if he knows the answer and if he doesn't at least tries to help with better formatting. They probably hunt and scavenge for badly formatted questions just to satisfy their SO entitlement. — PentaKon
Actually, Konstantine, I do edit badly formatted questions that I am unable to answer sometimes. Absolutes are risky. — David Navarre
We were able to achieve the functionality requested but at a huge computational cost (thus ended up removing it in the end). If I remember correctly, the reconfigure function itself breaks the grid columns's widths and other "stateful" properties when called. This is why we actually used grid.reconfigure(store, columns) and THEN went ahead and applied each stateful property like width, hidden and column position MANUALLY for EACH column. And because we have grids with maybe 20 columns this dropped grid loading performance a lot and thus we removed it. — PentaKon

ASN ASN · Accepted Answer · 2014-08-12T13:08:24

You can override the getState and applyState functions to exactly reflect your needs.

In getState (get current state so your provider can save it to the db) with something like:

getState: function() {
    var me = this;
    var state = me.callParent();
    var storeState = me.store.getState();

    if (storeState) state.storeState = storeState;

    var columns = me.getColumnManager().getColumns();
    var stateColumns = [];
    columns.forEach(function(e) {
      stateColumns.push({
        text: e.text,
        dataIndex: e.dataIndex,
        hidden: e.hidden,
        flex: e.flex,
      });
    });

    state = me.addPropertyToState(state, 'columns', stateColumns);
    return state;
}

You are flexible to save any state of your component to the state property. In your setState method, you can just retrieve the saved attributes and reconfigure your grid depending on it.

applyState: function(state) {
    var columns = state.columns;
    this.callParent(arguments);
    if (columns) {
      this.reconfigure(undefined, columns);
    }
}

Voila, you have a "dynamic grid" (columns are defined via the saved state in your db) and it is stateful.

Creating a stateful grid with reconfigure in ExtJS

1 Answers