ExtJs异步无法向外传值和赋值的完美解决办法


Posted in Javascript onJune 14, 2017

1、Ext.data.Store.load();方法是异步的,下面的方式获得的reCount始终是0,因为还没等后台的方法执行完就赋值了,此时store的record还没获得值。

var testStore = new Ext.data.GroupingStore({
   proxy : new Ext.data.HttpProxy({
      url : ''
   }),
   reader : new Ext.data.JsonReader({
      root : 'hstamcx',
      totalProperty : "results",
      fields : ["id","value"]
   })
});
Ext.onReady(function(){
     Ext.QuickTips.init();
     Ext.form.Field.prototype.msgTarget = 'side';
     testStore.load (); 
     var reCount = testStore.getCount();
     var port = new Ext.Viewport({
        layout : 'auto',
        frame : true,
        items : [winKey]
     });
});

2、如果想要对加载的值进行处理,必须将后续处理写在回调函数中。

Ext.onReady(function(){
     Ext.QuickTips.init();
     Ext.form.Field.prototype.msgTarget = 'side';
     testStore.load({
        callback : function(r, options, success) {
           var reCount = testStore.getCount();
        }
     });
     var port = new Ext.Viewport({
        layout : 'auto',
        frame : true,
        items : [winKey]
     });
});

此时可以获得reCount的值,并且callback : function(r, options, success)的r就是store加载查到的数据。

但依然存在问题:r的数据值只能在回调函数里面使用,在callback函数里既不能给外部的其他元素赋值,也没有办法将r数据传到外面去 

3、如果想在js页面向后台发送请求,并在外面使用后台返回的数据值,可以使用Ext.Ajax.request,并将请求方式设置成同步,接收数据的变量要定义在Ext.Ajax.request外面   

var cancelMode;
     Ext.Ajax.request({
        url: '',
        method: 'post',
        sync:true, //同步请求
        success: function(response) {
           var response = Ext.util.JSON.decode(response.responseText);
           cancelMode = response.hstamcx[0].param_value;
        }
      });

此时就可以在外面使用Ext.Ajax.request的请求获得的数据了,比如alert(cancelMode );

后台代码示例:该示例是举个大概例子,并不是完整代码

public void getData(HttpServletResponse response){
      TestData td = TestDataDao.getTestdata();
      String message = "{name:" + td .getName()+ ",id:" + td.getId()+ "}";
      PrintWriter out=response.getWriter();
      out.write(message);
      out.flush();
   }

以上所述是小编给大家介绍的ExtJs异步无法向外传值和赋值的完美解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
详解Vue爬坑之vuex初识
Jun 14 #Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 #Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 #Javascript
vue时间格式化实例代码
Jun 13 #Javascript
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
You might like
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP循环结构实例讲解
2014/02/10 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
vue2.x数组劫持原理的实现
2020/04/19 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
后进生转化工作制度
2014/01/17 职场文书
大学生旷课检讨书
2014/01/22 职场文书
3的组成教学反思
2014/04/30 职场文书
珍惜资源的建议书
2014/08/26 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2015年组织部工作总结
2015/04/03 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python