使用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文件及adapterextext-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来处理。

　　推荐阅读

　　js Array的用法总结

new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法： var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后>>>详细阅读

本文标题：使用EXT实现无刷新动态调用股票信息

地址：http://www.17bianji.com/kaifa2/JS/29249.html

1/2 1