Treelist Store oluşturulmadan önce yüklenmedi

Question

Gösterge panosu örneğini kullanarak, kullanıcı ayrıcalıklarına dayalı olarak bir treelist menü oluşturmaya çalışıyorum. Oturum açtıktan sonra ana görünüm oluşturulur. Ana, batı bölgesinde treelist menüyü ve bunun yanında veri panelini içerir. Navigasyon hashtag'ler kullanılarak yapılır. Sorun yenileme veya ilk başlatmada sorun. Aslında, gezinti deposunun görünüm oluşturulduktan sonra yüklendiğini fark ettim. Navigasyon deposunu nasıl/nereye yükleyebilirim, böylece görünümün yenilenmesini veya ilk initalizasyonunu gerçekleştiririm, onu alabilir ve rotaları eşleştirmek için kullanabilir miyim?

sayesinde M

Benim asıl görünümü şöyle

:

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

Ve 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

görünümünde kontrol

//... 
 

 
     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

Bir tür depo yüklemek için bekler bir yöntem ile yönlendirici eylem "daha önce" kullanarak çözer.

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

     action: 'onRouteChange' 
    } 

ve yöntemi:

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