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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
详解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动态生成VRML网页
2006/10/09 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
js分页代码分享
2014/04/28 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
python中管道用法入门实例
2015/06/04 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python3实现定时任务的四种方式
2019/06/03 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
优秀实习自我鉴定
2013/12/04 职场文书
外贸专业求职信
2014/03/09 职场文书
旅游安全协议书
2014/04/21 职场文书
小石潭记导游词
2015/02/03 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Java8中Stream的一些神操作
2021/11/02 Java/Android
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫