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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
js实现购物车功能
Jun 12 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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
2019十大人气国漫
2020/03/13 国漫
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
Javascript实现单例模式
2016/01/24 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python地图绘制实操详解
2019/03/04 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
学校经典推荐信
2013/10/30 职场文书
银行求职自荐书
2014/06/25 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js