Question

我有一个名为＆＃34; MenuPanel＆＃34;的导航视图。如下所示。

每个＆＃34;孩子＆＃34;记录有一个菜单，如果有多个孩子，我想直接转到现有的子菜单，否则我想显示子列表视图（＆＃39;子列表＆＃39; xtype）。

初始化视图后，有两个选项（如果我错了，请修复我）：

商店已加载
商店尚未加载

我使用isLoaded（）函数处理它们，然后在未加载的情况下添加（＆＃39; load＆＃39;）。但是，我相信有更好的方法可以做到，也许这不应该是初始化函数。

关于最佳做法的任何想法？

MenuPanel.js

Ext.define('eMaliApp.view.MenuPanel', {

    extend: 'Ext.NavigationView',

    xtype: 'menupanel',

    requires: [
        'eMaliApp.view.child.List',
        'eMaliApp.view.shared.TodayMenu'
    ],

    config: {

        store: 'children'

    },

    initialize: function() {

        this.callParent(arguments);

        var store = Ext.getStore('children');

        var me = this;
        var onStoreReady = function() {
            var data = store.getData();
            console.log('store data:', data);
            console.log('me:', me);
            if (_.isEmpty(data) || data.items.length > 1) {

                console.log('load children list');
                // add view
                var centersList = {
                    title: 'Child List',
                    xtype: 'childlist',
                    store: 'children',
                    showMenu: true
                };
                me.add(centersList);

            } else {

                // today menu
                console.log('today menu');
            };
        }

        if (store.isLoaded()) {
            console.log('Store is loaded');
            onStoreReady();
        } else {
            console.log('Store is NOT loaded');
            store.on('load', onStoreReady);
        }

    }

});

Answer 1

不要在导航视图的initialize方法中添加子视图。这是业务逻辑而不是视图逻辑。

将导航视图推送到视口的控制器也应该加载商店。当商店准备就绪时，控制器应将子视图推送到导航视图。这不应该直接在onStoreReady方法中完成。

Ext.define('Test.controller.MainCtrl', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            menuPanel: 'menupanel'
        }
    },

    start: function () {
        var menuPanel = Ext.create( 'Test.view.MenuPanel' );
        Ext.Viewport.add( menuPanel );

        var store = Test.getStore( 'children' );
        var me = this;
        store.load(function ( records, operation, success ) {
                if ( success ) {
                    me.onChildrenStoreLoaded( records );    
                } else {
                    // error handling
                }
            },
            me
        );
    },

    onChildrenStoreLoaded: function ( records) {
        var menuPanel = this.getMenuPanel();

        if ( records.lenght === 1 ) {
            console.log('today menu');
        } else {
            console.log('load children list');
            var centersList = {
                title: 'Child List',
                xtype: 'childlist',
                store: 'children',
                showMenu: true
            };
            menuPanel.push(centersList);
        }
    }
});

start方法是切入点。它只是创建导航视图并将其添加到视口。它也开始加载商店。

提供给store.load方法的匿名方法将在加载存储时执行。它将在控制器的上下文中运行（由于load方法的第二个参数）。它只检查加载是否成功，并相应地进行委托。

onChildrenStoreLoaded会将正确的视图推送到导航视图。

如果加载商店需要一段时间，您还可以屏蔽视口并在匿名方法中取消屏蔽它。

Sencha Touch：在视图存储准备就绪时执行某些操作

1 个答案: