使用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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
让任务管理器中的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
drupal 代码实现URL重写
2011/05/04 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
如何在PHP中生成随机数
2020/06/04 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Django实现随机图形验证码的示例
2020/10/15 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
门诊手术室工作制度
2014/01/30 职场文书
计算机专业职业规划
2014/02/28 职场文书
法律进社区实施方案
2014/03/21 职场文书
健康状况证明书
2014/11/26 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers