CODEWITHSUNDEEP
extjsgridstateful
PentaKon
PentaKon

Reputation: 4636

Creating a stateful grid with reconfigure in ExtJS

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?

Upvotes: 3

Views: 5370

Answers (1)

ASN
ASN

Reputation: 316

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.

Upvotes: 4

Related Questions