首页 web前端 js教程 使用EXT实现无刷新动态调用股票信息_YUI.Ext相关

使用EXT实现无刷新动态调用股票信息_YUI.Ext相关

May 16, 2016 pm 06:59 PM
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; ivar 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 return '' + val + '';
}else if(val > 0){
return '' + val + '';
}
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文件,代码如下: 
复制代码 代码如下:




鑲$エ淇℃伅










浠庤繖閲屽彲浠ョ湅鍒帮紝浣跨敤Ext鎶€鏈
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
深入探讨Linux ext2文件系统的物理存储结构 深入探讨Linux ext2文件系统的物理存储结构 Mar 14, 2024 pm 09:06 PM

Linuxext2文件系统是一种在大部分Linux操作系统上使用的文件系统,它采用了一种高效的磁盘存储结构来管理文件和目录的存储。在深入探讨Linuxext2文件系统的物理存储结构之前,我们首先需要了解一些基本概念。在ext2文件系统中,数据存储在数据块(block)中,数据块是文件系统中最小的可分配单位。每个数据块有固定的大小,通常为1KB、2KB或4

分析Linux ext2文件系统的物理组织方式 分析Linux ext2文件系统的物理组织方式 Mar 15, 2024 am 09:24 AM

Linuxext2文件系统是Linux操作系统中常用的文件系统之一,具有较好的性能和稳定性。本文将会详细分析ext2文件系统的物理组织方式,并提供一些具体的代码示例来帮助读者更好地理解。一、ext2文件系统概述ext2文件系统是Linux系统上最早期的第二代扩展文件系统,它在文件系统的性能、可靠性和稳定性上做了一定的改进。它主要由超级块、组描

Linux系统中ext3和ext4有什么不同? Linux系统中ext3和ext4有什么不同? Feb 19, 2024 am 11:48 AM

  文件系统是文件存放在磁盘等存储设备上的组织方法。Linux系统能支持多种目前流行的文件系统,其中包含:EXT2、EXT3、EXT4、FAT、FAT32等。那么Linux系统中ext3和ext4有什么不同?以下是详细的内容介绍。  Linux系统中ext3和ext4有什么不同?  1、更大的文件系统和更大的文件  ext3:16TB文件系统和最大2TB文件;  ext4:1EB文件系统和最大16TB文件。  2、无限数量的子目录  ext3:32000个子目录;  ext4:无限数量的子目录。

CentOS搭建web服务器的文件系统选择及优化建议 CentOS搭建web服务器的文件系统选择及优化建议 Aug 05, 2023 pm 03:35 PM

CentOS搭建web服务器的文件系统选择及优化建议简介:在搭建web服务器时,选择合适的文件系统并进行优化是极为重要的。本文将介绍在CentOS上搭建web服务器时常用的文件系统,并提供相应的优化建议。一、文件系统选择XFS文件系统XFS是一种先进的、高性能的日志文件系统。它具有快速高效的文件系统恢复能力,针对大容量存储的I/O操作性能表现出色。XFS对大

如何在Java中使用反射函数进行对象的动态创建和调用 如何在Java中使用反射函数进行对象的动态创建和调用 Oct 24, 2023 am 09:28 AM

如何在Java中使用反射函数进行对象的动态创建和调用引言:在Java编程中,反射是一项强大的技术,它允许我们在运行时获取并操作类的信息。其中,对象的动态创建和调用是反射的重要应用场景之一。本文将介绍如何在Java中使用反射函数实现对象的动态创建和调用,并提供具体的代码示例。一、反射概述:Java反射是指程序在运行时通过反射API操作目标类的相关属性和方法。在

PHP开发:使用 反射 和 魔术方法 实现代码自动生成和动态调用 PHP开发:使用 反射 和 魔术方法 实现代码自动生成和动态调用 Jun 15, 2023 pm 04:16 PM

PHP开发中,反射和魔术方法是两种常用的技巧。当我们需要自动生成代码或者动态调用某些函数时,反射和魔术方法可以使我们的代码更加灵活和高效。在本文中,我们将探讨如何使用反射和魔术方法来实现代码自动生成和动态调用。反射是PHP提供的一种强大的工具,它可以帮助我们在程序运行时获取类、方法和属性等信息。通过反射,我们可以动态地获取类或对象的方法、属性和注释等信息,使

Linux下ext2文件系统的物理结构详解 Linux下ext2文件系统的物理结构详解 Mar 14, 2024 am 10:03 AM

Linux下ext2文件系统的物理结构详解在Linux系统中,ext2是一种常用的文件系统类型,它是一种较为简单而又高效的文件系统。在本文中,我们将深入探讨ext2文件系统的物理结构,包括超级块、组描述符、inode表、数据块等,同时会提供具体的代码示例来帮助读者更好地理解。1.超级块(SuperBlock)超级块是ext2文件系统中最重要的数据结构之一

如何解决 golang 中的 “undefined: path.Ext” 错误? 如何解决 golang 中的 “undefined: path.Ext” 错误? Jun 24, 2023 pm 01:55 PM

在使用Golang进行开发的过程中,有时我们会遇到一些奇怪的错误和问题。其中,可能会出现“undefined:path.Ext”的错误提示。这个问题通常是由于缺少导入包引起的,我们可以使用以下几种方法来解决这个问题。方法一:导入"path"包在使用path.Ext函数时,我们需要导入"path"包。如果你还没有导入该包,可以在代码中添加

See all articles