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实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 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+mysql事务rollback&commit示例
2010/02/08 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
通过python顺序修改文件名字的方法
2018/07/11 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python读写csv文件的方法
2019/08/13 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python设置表格边框的具体方法
2020/07/17 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
应聘自荐信
2013/12/14 职场文书
采购部主管岗位职责
2014/01/01 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
政风行风评议心得体会
2014/10/21 职场文书
项目战略合作意向书
2015/05/08 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
走进科学观后感
2015/06/18 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书