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

 

1 Answer

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. Sencha Touch 2.2 Store Proxy 异常监控

    移动端到服务端通信往往会发生很多莫名的异常情况,如何有效的监控proxy异常,给用户友好的用户体验呢? Proxy给我提供了异常exception的监听事件,只需要监控该项目即可. Sencha To ...

  2. sencha touch dataview 中添加 button 等复杂布局并添加监听事件

    config 中的属性默认都会自动生成   getter   setter  applier  updater 四个方法. applier 在调用  setter 时被调用, updater 在属性值 ...

  3. Sencha Touch 2中如何动态添加button

    原理很简单无非就是在一个容器上面选中id,用容器的add方法将button循环加入. 现在我们来试一下 1.先定义一个Container组件用,以后在里面添加button ? 1 2 xtype:'c ...

  4. sencha touch mvc

    controller: Ext.define('MyApp2.controller.MyController1', { extend: 'Ext.app.Controller', config: { ...

  5. sencha touch 2中判断游览器是否包含webkit的方法

    <script type="text/javascript"> if (!Ext.browser.is.WebKit) { alert("The curren ...

  6. 【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  7. sencha touch 常见问题解答(26-50)

    26.sencha touch在华为.红米等部分手机下hide事件失效,msgbox无法关闭怎么办 答:请看http://www.cnblogs.com/cjpx00008/p/3535557.htm ...

  8. 第四步 使用 adt-eclipse 打包 Cordova (3.0及其以上版本) + sencha touch 项目

    cordova最新中文api http://cordova.apache.org/docs/zh/3.1.0/ 1.将Cordova 生成的项目导入到adt-eclipse中,如下: 项目结构如下: ...

  9. Sencha Touch 2 实现跨域访问

    最近要做手机移动App,最后采用HTMML5来做框架用Sencha Touch,在数据交互时遇到了Ajax跨域访问,在Sencha Touch 2中,实现跨域访问可以使用Ext类库提供给我们的类Ext ...

随机推荐

  1. Spring事务:一种编程式事务,三种声明式事务

    事务隔离级别 隔离级别是指若干个并发的事务之间的隔离程度.TransactionDefinition 接口中定义了五个表示隔离级别的常量: TransactionDefinition.ISOLATIO ...

  2. 转载:Linux系统和Linux系统之间如何实现文件传输

    两台Linux系统之间传输文件 听语音 | 浏览:13183 | 更新:2014-07-15 15:22 | 标签:linux 1 2 3 4 5 6 分步阅读 如何在Linux系统之间传输文件及文件 ...

  3. CentOS 7 systemd添加自定义系统服务

    systemd: CentOS 7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,即:/usr/lib/systemd/syste ...

  4. 你了解的UIKit结构?

  5. 【连载】Bootstrap开发漂亮的前端界面之插件开发

    相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义 ...

  6. 「日常训练」「小专题·USACO」 Ski Course Design (1-4)

    题目 以后补 分析 mmp这题把我写蠢哭了 我原来的思路是什么呢? 每轮找min/max,然后两个决策:升min/降max 像这样子dfs找最优,然后花式剪枝 但是一想不对啊,这才1-4,哪有那么复杂 ...

  7. 在easyUI开发中,出现jquery.easyui.min.js函数库问题

    easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直 ...

  8. lintcode-98-链表排序

    98-链表排序 在 O(n log n) 时间复杂度和常数级的空间复杂度下给链表排序. 样例 给出 1->3->2->null,给它排序变成 1->2->3->nu ...

  9. CodeForces Round #521 (Div.3) D. Cutting Out

    http://codeforces.com/contest/1077/problem/D You are given an array ss consisting of nn integers. Yo ...

  10. javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    主要介绍了javascript获取和判断浏览器窗口.屏幕.网页的高度.宽度等 scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端 ...