javascript - Ext JS 中的状态选择

Question

我有一个包含元素的常规树。我想做的是: 当我重新加载页面时，所选项目必须与之前相同(我仅选择树中的 1 个项目)。

例如，当我单击“Sue Potato”时 - 它被选中，当我刷新页面时，它必须看起来相同(也被选中)。 我尝试在 Sencha 文档上阅读一些 Stateful、Provider、Manager，但没有明白。

Controller 代码:

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'));
  }
});

树代码:

 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() {

    };
  }
});

非常感谢您的帮助。

Answer 1

这是上述要求的工作代码。我必须获取所选元素的 id，然后将其传递给 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);
    });
  }
});