Treelist Store wurde vor dem Rendern nicht geladen

Question

Mit dem Dashboard-Beispiel versuche ich, ein Baumstrukturmenü zu erstellen, basierend auf Benutzerberechtigungen. Nach erfolgreicher Anmeldung wird die Hauptansicht generiert. Die Hauptansicht enthält in der westlichen Region das Baumstrukturmenü und daneben das Datenfeld. Die Navigation erfolgt über Hashtags. Das Problem tritt beim Aktualisieren oder bei der ersten Initialisierung auf. Tatsächlich habe ich bemerkt, dass der Navigationsspeicher geladen wird, nachdem die Ansicht gerendert wurde. Wie/wo bekomme ich den Navigationsspeicher zu laden, also bei der Aktualisierung oder ersten Initialisierung der Ansicht, kann ich es bekommen und es verwenden, um die Routen zu entsprechen?

Danke, M

wie Meine Hauptansicht aussieht:

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

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

Und die Viewcontroller: Im Hinblick

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

Controller

//... 
 

 
     var me = this, 
 
      refs = me.getReferences(), 
 
      mainCard = refs.mainCardPanel, 
 
      mainLayout = mainCard.getLayout(), 
 
      navigationList = refs.navigationTreeList, 
 
      viewModel = me.getViewModel(), 
 
      vmData = viewModel.getData(), 
 
\t \t \t store = navigationList.getStore(), 
 
\t \t \t //store = Ext.getStore('NavigationTree'), 
 
\t \t \t node = store.findNode('routeId', hashTag), 
 
\t \t \t view = node ? node.get('view') : null, 
 
\t \t \t lastView = vmData.currentView, 
 
\t \t \t existingItem = mainCard.child('component[routeId=' + hashTag + ']'), 
 
\t \t \t newView; 
 

 
// BEGIN ADD THIS 
 

 
\t \t if(!view) { 
 
\t \t \t var viewTag = hashTag.charAt(0).toUpperCase() + hashTag.slice(1); 
 
\t \t \t view = hashTag + "." + viewTag; 
 
\t \t \t if(!Ext.ClassManager.getAliasesByName('Fruileg3.view.' + view)) view = ''; 
 
\t \t } 
 

 
// END 
 
\t \t // Kill any previously routed window 
 
\t \t if (lastView && lastView.isWindow) { 
 
\t \t \t lastView.destroy(); 
 
\t \t } 
 

 
//...

Answer 2

ich es irgendwie lösen unter Verwendung von „vor“ in Aktion Router mit einem Verfahren, das für wartet der Speicher zu laden.

routes: { 
    ':node':{ 
     before: 'wait', 

     action: 'onRouteChange' 
    } 

und die Methode:

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