使用EXT实现无刷新动态调用股票信息


Posted in Javascript onNovember 01, 2008

说句老实话,我目前还对Ext技术不是很熟,所以写的代码自己也觉得怪怪的,有什么不对的地方,还望赐教。
使用的Ext版本是ext-2.2,下载地址为:http://www.extjs.com/products/extjs/download.php
下载Ext JS 2.2 SDK,解压后拷贝resources文件夹至工作目录。
在resources文件夹下新建jscript文件夹,并拷贝ext根目录下ext-all.js文件及adapter\ext\ext-base.js文件至jscript文件夹下,并新建stock.js文件,代码如下:

function ajaxRequest(){ 
Ext.Ajax.request({ 
url: 'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028,', 
success: function(response){ 
var stocks = response.responseText.split(';'); 
var length = stocks.length - 2; 
var dataset = new Array(length); 
for(var i=0; i<length; i++){ 
var content = stocks[i]; 
var temp1 = content.split('=')[0]; 
var temp2 = content.split('=')[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace('"', ''); 
var name = temp3.split(',')[0]; 
var tday_f = temp3.split(',')[1]; 
var yest_f = temp3.split(',')[2]; 
var curr_f = temp3.split(',')[3]; 
var temp_f = curr_f - yest_f; 
var data_i = new Array(9); 
data_i[0] = code; 
data_i[1] = name; 
data_i[2] = curr_f; 
data_i[3] = tday_f; 
data_i[4] = yest_f; 
data_i[5] = temp_f.toFixed(2); 
data_i[6] = ((temp_f / yest_f) * 100).toFixed(2); 
data_i[7] = temp3.split(',')[4]; 
data_i[8] = temp3.split(',')[5]; 
dataset[i] = data_i; 
} 
var store = new Ext.data.SimpleStore({ 
fields: [ 
{name: 'a1'}, 
{name: 'a2'}, 
{name: 'a3'}, 
{name: 'a4'}, 
{name: 'a5'}, 
{name: 'a6'}, 
{name: 'a7'}, 
{name: 'a8'}, 
{name: 'a9'} 
] 
}); 
//store.loadData(dataset); 
var grid = new Ext.grid.GridPanel({ 
//renderTo: document.body, 
store: store, 
columns: [ 
{header: "股票代号", width: 100, sortable: true, dataIndex: 'a1', id:'a1'}, 
{header: "股票名称", width: 100, sortable: true, dataIndex: 'a2'}, 
{header: "当前价格", width: 100, sortable: true, dataIndex: 'a3'}, 
{header: "今日开盘", width: 100, sortable: true, dataIndex: 'a4'}, 
{header: "昨日收盘", width: 100, sortable: true, dataIndex: 'a5'}, 
{header: "当前差价", width: 100, sortable: true, dataIndex: 'a6', renderer: change}, 
{header: "涨跌幅度", width: 100, sortable: true, dataIndex: 'a7', renderer: change}, 
{header: "最高价格", width: 100, sortable: true, dataIndex: 'a8'}, 
{header: "最低价格", width: 100, sortable: true, dataIndex: 'a9'} 
], 
stripeRows: true, 
autoExpandColumn: 'a1', 
height:240, 
width:740, 
title:'股票信息一览' 
}); 
if(document.getElementById("stockgrid").innerHTML == ""){ 
grid.render('stockgrid'); 
grid.getSelectionModel().selectFirstRow(); 
} 
grid.store.loadData(dataset); 
} 
}); 
} 
function change(val){ 
if(val < 0){ 
return '<span style="color:green;">' + val + '</span>'; 
}else if(val > 0){ 
return '<span style="color:red;">' + val + '</span>'; 
} 
return val; 
} 
Ext.onReady(function(){ 
//修正页面启动时提示下载http://extjs.com/s.gif的问题 
Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif"; 
Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
ajaxRequest(); 
window.setInterval("ajaxRequest()",3000); 
});

在工作目录下新建stock.html文件,代码如下: 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
<title>股票信息</title> 
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 
<script type="text/javascript" src="resources/jscript/ext-base.js"></script> 
<script type="text/javascript" src="resources/jscript/ext-all.js"></script> 
<script type="text/javascript" src="resources/jscript/stock.js"></script> 
</head> 
<body> 
<div id="stockgrid"></div> 
</body> 
</html>

从这里可以看到,使用Ext技术,动态页面从页面表现层到数据取得全部都交由Ext来处理。
Javascript 相关文章推荐
巧用局部变量提升javascript性能
Feb 24 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
Node.js使用Express.Router的方法
Nov 14 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
让任务管理器中的CPU跳舞的js代码
Nov 01 #Javascript
js CSS操作方法集合
Oct 31 #Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 #Javascript
JS Array对象入门分析
Oct 30 #Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 #Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 #Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 #Javascript
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
问卷调查计划书
2014/01/10 职场文书
学校联谊活动方案
2014/02/15 职场文书
效能风暴心得体会
2014/09/04 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript