Sencha - 登录后按需加载商店

Question

我有一个UserStore，我想在成功登录用户后加载。我不能让这个工作，即找到一个模式来做到这一点。

我现在在app.js中有这样的UserStore：

stores : ['UserStore']

商店

Ext.define('MyApp.store.UserStore', {
extend : 'Ext.data.Store',
xtype : 'userstore',
config : {
    model : 'MyApp.model.User',
    autoLoad : true,
    proxy : {
        type : 'ajax',
        url : 'php/get_user.php',
        reader : {
            type : 'json',
            rootProperty : 'users'
        }
    },
    listeners : {
        beforeload : function() {
            console.log('Before load');
        },
        load : function(store) {
            console.log('load');
        }
    }
}
});

根据用户登录前未设置的php $ _SESSION ['userid']检索用户。

启动应用程序时，商店已加载但未找到任何数据。我需要回到开头再次登录，然后当然会话ID在上次登录时设置。

我想要完成的是延迟加载商店或仅在视图需要时自动加载。

我试过这个，但我无法让它发挥作用。

这就是我所做的：

选项1

我从app.js中删除了UserStore，并在View中添加了一个require和xtype项，但后来我得到了     [WARN] [Ext.dataview.DataView #applicationStore]无法找到指定的商店

视图

Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',

requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],

config : {
    layout : 'fit',
    title : 'Profiel',
    iconCls : 'user3',
    cls : 'home',
    scrollable : true,
    styleHtmlContent : true,
    html : ['<h1>Mijn Profiel</h1>'].join(""),
    items : [Ext.create('Ext.DataView', {
        store : 'userstore',
        itemTpl : '<h2>{USERNAME}</h2><p>{EMAIL}</p>'
    })]
}
});

选项2

尝试找出我是否可以将自动加载设置为false并通过某些侦听器按需加载。但我无法确切地知道如何。

那么，如何实现这一目标以及实现这一目标的最佳模式是什么。

感谢您的帮助！     Ext.dataview.DataView #applicationStore找不到指定的商店

Answer 1

我实际上从未以这种方式分配商店：store : 'userstore'。更好的方法是创建商店的实例并自己加载它，在我的商店使用autoLoad：false，我不喜欢它们在应用程序的开头加载。试试这个（我无法测试它，因为我通常不编写触摸应用程序）。

Ext.define('MyApp.view.Profile', {
    extend: 'Ext.Panel',
    xtype: 'profileview',

    requires: ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],

    config: {
        layout: 'fit',
        title: 'Profiel',
        iconCls: 'user3',
        cls: 'home',
        scrollable: true,
        styleHtmlContent: true,
        html: ['<h1>Mijn Profiel</h1>'].join("")
    },

    initialize: function () {
        var me = this;

        //Create the instance of the store and load it
        var userStore = Ext.create('MyApp.store.UserStore');
        userStore.load();

        //Create the dataview
        var view = Ext.create('Ext.DataView', {
            store: userStore,
            itemTpl: '<h2>{USERNAME}</h2><p>{EMAIL}</p>'
        });
        //Add the dataview to the panel
        me.add(view);
    }
});

我喜欢这种工作方式。