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. python,函数式编程

    函数式编程: 特点:允许传递的参数是函数,且允许返回一个函数. 由于Python允许使用变量,因此,Python不是纯函数式编程语言,同样的输入可能输出不同,有副作用.纯函数式编程语言没有变量,输入和 ...

  2. Mysql双主操作

    MySQL双主(主主)架构方案   在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主从方案,一主多从,读写分离等,但是单主存在单点故障,从库切换成主库需要作改动.因此,如果 ...

  3. java_hdfs之读写文件

    package hdfsTest.answer.hdfs; import java.io.IOException; import java.net.URI; //import java.net.URL ...

  4. Git初步

    在多人参与开发的项目中,版本控制工具是必须的,网上有很多不错的教程,能简单使用就ok了,粘几篇教程,方便学习 首先我们要了解一些基本的概念,此处简单描述一下 (1)集中式版本控制系统: CVS.SVN ...

  5. mysql 查询当月天数

    SELECT day(LAST_DAY('2018-02-01')) 思路: 先通过LAST_DAY() 查找当月最后一天,然后通过day()返回天数.

  6. 虚拟现实-VR-UE4-认识UE4

    VR的火热,让每个人都想参与一下, 公司在展会上面搞了一个VR的Demo,关注度超出预期,使得公司高层决定来个VR项目 所以 关于UE4 百度百科地址:http://baike.baidu.com/l ...

  7. 用Python 的一些用法与 JS 进行类比,看有什么相似?

    Python 是一门运用很广泛的语言,自动化脚本.爬虫,甚至在深度学习领域也都有 Python 的身影.作为一名前端开发者,也了解 ES6 中的很多特性借鉴自 Python (比如默认参数.解构赋值. ...

  8. 分布式资源调度--YARN框架

    YARN产生背景 YARN是Hadoop2.x才有的,所以在介绍YARN之前,我们先看一下MapReduce1.x时所存在的问题: 单点故障 节点压力大 不易扩展 MapReduce1.x时的架构如下 ...

  9. C指针分析详解

    局部变量和全局变量初始化区别: 局部变量,在未初始化情况下,初值为随机值.C规范对该初值并没有做规定,具体实现由编译器决定.如VC/VS等编译器,会将初始值值为0xCCCCCCCC, 而GCC等编译器 ...

  10. Halcon和Opencv区别

    Halcon:机器视觉行业里知名的商业视觉库,非开源的,在国内市场份额处于第一,其提供了1500个多个API算子供开发人员使用,有些编程基础的都可以轻松的入门,其调试也是很方便的,断点单步运行,图像变 ...