繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 使用EXT实现无刷新动态调用股票信息
- Javascript
- 用Javascript实现锚点(Anchor)间平滑跳转
- 实现png图片和png背景透明（支持多浏览器）的方法
- 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
- 用DIV完美模拟createPopup 弹出窗口(修正版)，支持Firefox,ie,chrome
- JavaScript 中级笔记 第一章
- IE与Firefox在JavaScript上的7个不同写法小结
- MooTools 1.2介绍
- Mootools 1.2教程(2) DOM选择器
- Mootools 1.2教程(3) 数组使用简介
- 在IE下获取object（ActiveX）的Param的代码
- ExtJS 配置和表格控件使用
- javascript 缓冲效果实现代码 推荐
- html数组字符串拼接的最快方法
- JavaScript 浮动定位提示效果实现代码
- 类似CSDN图片切换效果脚本
- javascript 面向对象编程 function也是类
- javascript 面向对象编程 聊聊对象的事
- javascript 面向对象编程 function是方法(函数)
- [原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
- jQuery slider Content(左右控制移动)
Javascript 中的 使用EXT实现无刷新动态调用股票信息
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 245 ::
收藏到网摘: n/a
最近开始对ExtJS感兴趣了，今天正好有空，花了点时间，写了个基于Ext的例子。 说句老实话，我目前还对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来处理。
评论 (0) All
