Treelist Store not loaded before render - extjs

Question

Using on the dashboard example, i'm trying to generate a treelist menu, based on user privileges.
After successfully log in, the main view is generated. The main, contains in the west region the treelist menu and next to it, the data panel. The navigation is done by using hashtags. The problem apear on refresh or in the first initialization. Actually, i noticed that the navigation store is loaded after the view is rendered.
How / where do i get to load the navigation store, so on refresh or first initalization of the view, i can get it and using it to match the routes?
Thanks,
M
My main view looks like this:
Ext.define('app.view.main.Main', {
extend: 'Ext.container.Viewport',
xtype: 'app-main',
id:'app-main',
requires: [
'Ext.button.Segmented',
'Ext.list.Tree'
],
controller: 'main',
viewModel: 'main',
cls: 'sencha-dash-viewport',
itemId: 'mainView',
layout: {
type: 'vbox',
align: 'stretch'
},
listeners: {
render: 'onMainViewRender'
},
items: [
{
xtype: 'toolbar',
cls: 'sencha-dash-dash-headerbar shadow',
height: 64,
itemId: 'headerBar',
items: [
{
xtype: 'tbtext',
text: localStorage.getItem('Name'),
cls: 'top-user-name'
},
{
xtype: 'image',
cls: 'header-right-profile-image',
height: 35,
width: 35,
alt:'current user image',
src: 'resources/images/user-profile/mb.jpg'
}
]
},
{
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [
{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
width: 250,
expanderFirst: false,
expanderOnly: true,
ui: 'navigation',
bind: '{navItems}',
listeners: {
selectionchange: 'onNavigationTreeSelectionChange'
}
},
{
xtype: 'container',
reference: 'mainCardPanel',
flex:1,
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}
]
}
]
});
The viewmodel:
Ext.define('app.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
stores: {
navItems: {
type: 'tree',
storeId: 'NavigationTree',
name: 'NavigationTree',
root: {
expanded: true
},
autoLoad: false,
proxy: {
type: 'ajax',
url: 'php.php',
reader: {
type: 'json',
idProperty: 'id',
messageProperty: 'msg'
}
}
}
}
});
And the viewcontroller:
Ext.define('app.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
listen : {
controller : {
'#' : {
unmatchedroute : 'onRouteChange'
}
}
},
routes: {
':node': 'onRouteChange'
},
lastView: null,
setCurrentView: function(hashTag) {
hashTag = (hashTag || '').toLowerCase();
var me = this,
refs = me.getReferences(),
mainCard = refs.mainCardPanel,
mainLayout = mainCard.getLayout(),
navigationList = refs.navigationTreeList,
store = me.getViewModel().getStore('navItems');
//store = navigationList.getStore();
var node = store.findNode('routeId', hashTag) ||
store.findNode('viewType', hashTag);
var view = (node && node.get('viewType')) ,
lastView = me.lastView,
existingItem = mainCard.child('component[routeId=' + hashTag + ']'),
newView;
// Kill any previously routed window
if (lastView && lastView.isWindow) {
lastView.destroy();
}
lastView = mainLayout.getActiveItem();
if (!existingItem) {
newView = Ext.create({
xtype: view,
routeId: hashTag, // for existingItem search later
hideMode: 'offsets'
});
}
if (!newView || !newView.isWindow) {
// !newView means we have an existing view, but if the newView isWindow
// we don't add it to the card layout.
if (existingItem) {
// We don't have a newView, so activate the existing view.
if (existingItem !== lastView) {
mainLayout.setActiveItem(existingItem);
}
newView = existingItem;
}
else {
// newView is set (did not exist already), so add it and make it the
// activeItem.
Ext.suspendLayouts();
mainLayout.setActiveItem(mainCard.add(newView));
Ext.resumeLayouts(true);
}
}
navigationList.setSelection(node);
if (newView.isFocusable(true)) {
newView.focus();
}
me.lastView = newView;
},
onNavigationTreeSelectionChange: function (tree, node) {
var to = node && (node.get('routeId') || node.get('viewType'));
if (to) {
this.redirectTo(to);
}
},
onToggleNavigationSize: function () {
var me = this,
refs = me.getReferences(),
navigationList = refs.navigationTreeList,
wrapContainer = refs.mainContainerWrap,
collapsing = !navigationList.getMicro(),
new_width = collapsing ? 64 : 250;
if (Ext.isIE9m || !Ext.os.is.Desktop) {
Ext.suspendLayouts();
refs.senchaLogo.setWidth(new_width);
navigationList.setWidth(new_width);
navigationList.setMicro(collapsing);
Ext.resumeLayouts(); // do not flush the layout here...
// No animation for IE9 or lower...
wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
wrapContainer.updateLayout(); // ... since this will flush them
}
else {
if (!collapsing) {
// If we are leaving micro mode (expanding), we do that first so that the
// text of the items in the navlist will be revealed by the animation.
navigationList.setMicro(false);
}
// Start this layout first since it does not require a layout
refs.senchaLogo.animate({dynamic: true, to: {width: new_width}});
// Directly adjust the width config and then run the main wrap container layout
// as the root layout (it and its chidren). This will cause the adjusted size to
// be flushed to the element and animate to that new size.
navigationList.width = new_width;
wrapContainer.updateLayout({isRoot: true});
navigationList.el.addCls('nav-tree-animating');
// We need to switch to micro mode on the navlist *after* the animation (this
// allows the "sweep" to leave the item text in place until it is no longer
// visible.
if (collapsing) {
navigationList.on({
afterlayoutanimation: function () {
navigationList.setMicro(true);
navigationList.el.removeCls('nav-tree-animating');
},
single: true
});
}
}
},
onMainViewRender:function() {
if (!window.location.hash) {
this.redirectTo("dashboard");
}
},
onRouteChange:function(id){
this.setCurrentView(id);
},
onSearchRouteChange: function () {
this.setCurrentView('searchresults');
},
onSwitchToModern: function () {
Ext.Msg.confirm('Switch to Modern', 'Are you sure you want to switch toolkits?',
this.onSwitchToModernConfirmed, this);
},
onSwitchToModernConfirmed: function (choice) {
if (choice === 'yes') {
var s = location.search;
// Strip "?classic" or "&classic" with optionally more "&foo" tokens
// following and ensure we don't start with "?".
s = s.replace(/(^\?|&)classic($|&)/, '').replace(/^\?/, '');
// Add "?modern&" before the remaining tokens and strip & if there are
// none.
location.search = ('?modern&' + s).replace(/&$/, '');
}
},
onAfterRender: function(){
console.log('after render');
}
});

Answer 1

I kinda solve it using "before" action in router with a method that waits for the store to load.
routes: {
':node':{
before: 'wait',
action: 'onRouteChange'
}
and the method:
wait : function() {
var args = Ext.Array.slice(arguments),
action = args.pop(),
store = Ext.getStore('NavigationTree');
if (store.loading) {
store.on('load', action.resume, action);
} else {
action.resume();
}
}

Answer 2

In viewcontroller
//...
var me = this,
refs = me.getReferences(),
mainCard = refs.mainCardPanel,
mainLayout = mainCard.getLayout(),
navigationList = refs.navigationTreeList,
viewModel = me.getViewModel(),
vmData = viewModel.getData(),
store = navigationList.getStore(),
//store = Ext.getStore('NavigationTree'),
node = store.findNode('routeId', hashTag),
view = node ? node.get('view') : null,
lastView = vmData.currentView,
existingItem = mainCard.child('component[routeId=' + hashTag + ']'),
newView;
// BEGIN ADD THIS
if(!view) {
var viewTag = hashTag.charAt(0).toUpperCase() + hashTag.slice(1);
view = hashTag + "." + viewTag;
if(!Ext.ClassManager.getAliasesByName('Fruileg3.view.' + view)) view = '';
}
// END
// Kill any previously routed window
if (lastView && lastView.isWindow) {
lastView.destroy();
}
//...