Sencha Touch：当视图商店准备好时做一些事情

Question

如下所示，我有一个名为“MenuPanel”的导航视图。

每个“Child”记录都有一个菜单，如果有多个child，我想直接进入现有的child menu，否则我想显示children list view（'childlist' xtype）。

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

1. 商店已加载
2. 商店尚未加载

我使用 isLoaded() 函数处理它们，然后添加 on('load') 以防它未加载。但是，我相信有更好的方法可以做到这一点，也许这不应该在初始化功能上。

关于最佳实践的任何想法？

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 会将正确的视图推送到导航视图。

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