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

最新推荐文章于 2022-07-23 22:09:15 发布

昆山人在上海

最新推荐文章于 2022-07-23 22:09:15 发布

阅读量978

点赞数

分类专栏： Ajax技术文章标签： ext header dataset resources stylesheet function

本文链接：https://blog.csdn.net/kunshan_shenbin/article/details/3202660

版权

Ajax技术专栏收录该内容

103 篇文章 0 订阅

订阅专栏

先看一下我以前写的文章：

http://blog.csdn.net/kunshan_shenbin/archive/2007/12/06/1921230.aspx

http://blog.csdn.net/kunshan_shenbin/archive/2007/12/11/1929767.aspx

http://blog.csdn.net/kunshan_shenbin/archive/2007/12/18/1946843.aspx

最近开始对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(flag){
    
    Ext.Ajax.request({
       url: 'http://hq.sinajs.cn/list=sh000001,sz399001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601186,sh601866,sh600075,sh600133,sz000807,sz000544,',
       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: 80, sortable: true, dataIndex: 'a2'},
                    {header: "当前价格", width: 80, sortable: true, dataIndex: 'a3'},
                    {header: "今日开盘", width: 80, sortable: true, dataIndex: 'a4'},
                    {header: "昨日收盘", width: 80, sortable: true, dataIndex: 'a5'},
                    {header: "当前差价", width: 80, sortable: true, dataIndex: 'a6', renderer: change},
                    {header: "涨跌幅度", width: 80, sortable: true, dataIndex: 'a7', renderer: change},
                    {header: "最高价格", width: 80, sortable: true, dataIndex: 'a8'},
                    {header: "最低价格", width: 80, sortable: true, dataIndex: 'a9'}
                ],
                stripeRows: true,
                autoExpandColumn: 'a1',
                height:325,
                width:740,
                title:'股票信息一览'
            });
            
            //Ext.get("stockgrid").dom.innerText = ""; 
            Ext.getDom("stockgrid").innerText = "";
            
            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(true);
    window.setInterval("ajaxRequest(false)",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>
 