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

active oldest 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);

    }

});

巴特西

Sencha Touch MVC 中 store 的使用

1 Answer

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

最新文章

热门文章