Выделение с учетом состояния в Ext JS

Question

У меня есть регулярное дерево с элементами. Я хочу сделать следующее: Когда я перезагружаю страницу, выбранный элемент должен быть таким же, как и раньше (я выбираю только 1 элемент в дереве).

Например, когда я нажимаю на «Сью картофеля» - он выбран и при обновлении страницы, она должна выглядеть так же (также быть выбран). Я пробовал читать некоторые Stateful, Provider, Manager в Sencha Docs, но я этого не понимал.

код контроллера:

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

Это рабочий код требования выше. Мне нужно было получить идентификатор выбранного элемента, а затем передать его 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); 
    }); 
    } 
}); 

Answer 2

Вы сохраненное состояние дерева и установить его в Государственный Диспетчере

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

Поэтому, когда вы обновите свое состояние страницы, оно будет применяться, и элемент также будет выбран.

Есть ли необходимость хранить состояние дерева? Если да, и вы еще не хотите выбирать, вы можете принудительно очистить выделение на дереве.