CODEWITHSUNDEEP
javascriptextjs
Fleeck
Fleeck

Reputation: 1066

Stateful selection in Ext JS

I have a regular tree with elements. What i want to do is following: When I reload the page, the selected item must be the same as before ( I select only 1 item in the tree).

enter image description here

For example, when I click on 'Sue Potato' - it is selected and when I refresh the page, it must look the same (be also selected). I've tried reading some Stateful, Provider, Manager on the Sencha Docs, but I didn't get it.

Controller code:

Ext.define('FirstApp.controller.Main', {
  extend: 'Ext.app.Controller',
  refs: [
    {
      ref: 'grid',
      selector: 'lesson-grid'
    },
    {
      ref: 'tree',
      selector: 'school-tree'
    }
  ],

  init: function() {
    Ext.state.Manager.setProvider(Ext.create('Ext.state.LocalStorageProvider'));
  }
});

Tree code:

 Ext.define('FirstApp.view.SchoolTree', {
  extend: 'Ext.tree.Panel',  
  xtype: 'school-tree',
  stateful: true,
  stateId: 'stateGrid',
  stateEvents:['selection'],

  constructor: function() {
    var that = this;
    this.store = Ext.create('FirstApp.store.School');
    this.store.on('load', function () {
      that.getSelectionModel().select(1, true);
    });
    this.callParent(arguments);

    this.getState = function() {
      return that.getSelectionModel().getSelection();
    };

    this.applyState = function() {

    };
  }
});

Help would be much appreciated.

Upvotes: 0

Views: 1267

Answers (2)

Fleeck
Fleeck

Reputation: 1066

This is a working code of the requirement above.I had to get an id of the selected element and then pass it to applyState.

Ext.define('FirstApp.view.SchoolTree', {
  extend: 'Ext.tree.Panel',  
  xtype: 'school-tree',
  stateful: true,
  stateId: 'stateTree',
  stateEvents:['selectionchange'],

  constructor: function() {
    var that = this;
    this.store = Ext.create('FirstApp.store.School');
    this.store.on('load', function () {
      that.getSelectionModel().select(1);
    });
      this.callParent(arguments);
  },

  getState: function() { 
      return {
        'stateTree': this.getSelectionModel().getSelection()[0].getId()
      };
  },

  applyState: function(state) {
    var me = this;
    this.store.on('load', function(record) {
      record = this.getById(state.stateTree); 
      me.getSelectionModel().select(record);
    });
  }
});

Upvotes: 1

Mohit Saxena
Mohit Saxena

Reputation: 1449

You stored tree state and set it into State Manager

Ext.state.Manager.setProvider(Ext.create('Ext.state.LocalStorageProvider'));

So when you will refresh your page state will apply and an item will be also selected.

Is there any requirement to store state of tree? If yes and still you don't want to selected then you can forcefully clear selection on tree render.

Upvotes: 0

Related Questions