レンセリング前にTreelistストアがロードされていません

Question

ダッシュボードの例では、ユーザー特権に基づいてツリーリストメニューを生成しようとしています。 正常にログインすると、メインビューが生成されます。メインは、西の地域にはツリーリストメニューがあり、その隣にデータパネルがあります。ナビゲーションはハッシュタグを使用して行われます。リフレッシュまたは最初の初期化で問題が発生します。実際には、ビューがレンダリングされた後にナビゲーションストアがロードされていることに気付きました。 どのように/どこでナビゲーションストアを読み込むのですか？ビューの更新や最初の初期化時に、取得してルートに一致させるために使用できますか？

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

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

との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

私の主なビューは次のようになります

おかげで、 M

コントローラ

//... 
 

 
     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

Iはちょっとストアがロードするのを待つ方法とルータのアクション「前」を使用して解決します。

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

     action: 'onRouteChange' 
    } 

と方法：

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