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

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