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 Discuz代码中的msn聊天小功能
May 25 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
各种常用的JS函数整理
Oct 25 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
javascript 跳转代码集合
2009/12/03 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JsRender for object语法简介
2014/10/31 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
windows下ipython的安装与使用详解
2016/10/20 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
什么是.net
2015/08/03 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
桥梁工程专业求职信
2014/04/21 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
python 如何用terminal输入参数
2021/05/25 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技
mysql数据库如何转移到oracle
2022/12/24 MySQL