Sencha Touch MVC 中 store 的使用

I have a UserStore that I want to load after succesful login of a user. I can't get this to work i.e. find a pattern to do this.

I now have the UserStore in the app.js like this:

stores : ['UserStore']

The store

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

The user is retrieved based on the php $_SESSION['userid'] which is not set before a user is loggedin.

When starting up the app the store is loaded but it doesn't find any data. I need to go back to the beginning to log in again and then of course the session id was set in the previous login.

What I am trying to accomplish is either to lazy load the store or to autoload only when needed by the View.

I have tried this but I can't get it to work.

This is what I did:

option 1

I removed the UserStore from app.js and added a require and xtype item to the View but then I get [WARN][Ext.dataview.DataView#applyStore] The specified Store cannot be found

The View

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

Option 2

try to find out if I can set the autoload to false and load in on demand via some listener. But I can't find out exactly how.

So, how can this be achieved and what is the best pattern to do this.

Thanks for your help! Ext.dataview.DataView#applyStore The specified Store cannot be found

add a comment

1 Answer

activeoldest votes

up vote3 down vote accepted

I actually never assign stores this way: store : 'userstore'. A better way is to create an instance of the store and load it yourself, using the autoLoad: false on my stores, I don't like them loading at start of the app. Try this (I can't test it because I'm not usually programming touch apps).

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

关注公众号，分享干货，讨论技术