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

我在路由器中使用“before”操作解决它，并使用等待存储加载的方法。

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

和方法：

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

        action: 'onRouteChange'  
    }

Answer 2

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

在渲染之前未加载Treelist Store

2 个答案: