关于Ext4的mvc模式构建前端界面的问题！reader.read is not a function

最新推荐文章于 2024-07-10 21:17:53 发布

Kvkens

最新推荐文章于 2024-07-10 21:17:53 发布

阅读量1.4k

点赞数

分类专栏： ExtJs4 文章标签： mvc function ext autoload json api

本文链接：https://blog.youkuaiyun.com/kvkens/article/details/6595851

版权

ExtJs4 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在使用Ext4的MVC模式构建前端界面时遇到的'reader.read is not a function'错误。问题源于加载顺序问题，即在store尝试加载model之前，model未被正确加载。解决方法是在store中添加'my.model.User'到requires数组，确保model在store加载前被读取。提供了一个修改后的代码示例，展示了如何在store配置中添加requires字段以正确引用model。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原帖发表在我的baidu个人空间.

http://hi.baidu.com/kvkens/blog/item/d40f84946d6a7204d21b7096.html

原创！

==================================================================

一直按官方API给的例子在看MVC，一直没有成功，总是出问题，本地内存数据可以加载，但是官方的远程JSON一直是错误的，写普通的EXT可以加载，在MVC下就是无法加载，显示“reader.read is not a function”，大概的意思是读取函数不存在模型是空的，也就是说，model是未赋值的，不存在才出的错误，可是model是赋值的，很奇怪，后来百度无结果，ext4在国内资源讨论还是很少的，最后我在google的时候，看到Sencha官方forum的一个帖子，我才恍然大悟 http://www.sencha.com/forum/showthread.php?136484-quot-reader.read-is-not-a-function-quot-problem-in-firefox/page2 （reader.read is not a function" problem in firefox），说的是MVC的加载顺序问题，

ok I resolve my problem...
and I understand I have to include my file in this order :
- app.js
- model.js
- store.js
- view.js
- controllers.js
otherwise I need to use Ext.require ...

看到这个我明白了是加载顺序！

很显然，我们的EXT4 MVC的加载顺序是这样子的，app->controller->view->store->model

看到没，最后是model ，但是store是需要加载model的，所以导致store要去加载model的时候,model不存在，解决方法就是在store里面添加引用requires: [ 'My.model.User']

这样，store就可以在加载之前把model提前读取来，就可以访问到了。

附一下修改后的代码：

Ext.define('AM.store.Users', {
extend : 'Ext.data.Store',
requires : [ 'AM.model.User' ],
model : 'AM.model.User',
autoLoad : true,
proxy : {
  type : 'ajax',
  api : {
   read : 'data/users.json',
   update : 'data/updateUsers.json'
  },
  reader : {
   type : 'json',
   root : 'users',
   successProperty : 'success'
  }
}
});

Ext.define('AM.store.Users', {
 extend : 'Ext.data.Store',
 requires : [ 'AM.model.User' ],//添加引用
 model : 'AM.model.User',
 autoLoad : true,
 proxy : {
  type : 'ajax',
  api : {
   read : 'data/users.json',
   update : 'data/updateUsers.json'
  },
  reader : {
   type : 'json',
   root : 'users',
   successProperty : 'success'
  }
 }
});