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的仿flash的广告轮播
Nov 05 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
详解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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
matplotlib设置legend图例代码示例
2017/12/19 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python写一个随机点名软件的实例
2019/11/28 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
打架检讨书100字
2014/01/08 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
广告业务员岗位职责
2014/02/06 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
顶岗实习协议书
2015/01/29 职场文书
我是特种兵观后感
2015/06/11 职场文书