To be honest, I am not very familiar with Ext technology yet, so the code I write feels weird. If there is something wrong, I hope you can enlighten me. The Ext version used is ext-2.2, and the download address is: http://www.extjs.com/products/extjs/download.php Download Ext JS 2.2 SDK, unzip and copy the resources folder to the working directory. Create a new jscript folder in the resources folder, and copy the ext-all.js file and adapterextext-base.js file in the ext root directory to the jscript folder, and create a new stock.js file. The code is as follows:
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: "Stock Code", width: 100, sortable: true, dataIndex: 'a1', id:'a1'}, {header: "Stock Name", width: 100, sortable: true, dataIndex: 'a2'}, {header: "Current price", width: 100, sortable: true, dataIndex: 'a3'}, {header: "Today's opening", width: 100, sortable: true, dataIndex: 'a4'}, {header: "Yesterday's closing price", width: 100, sortable: true, dataIndex: 'a5'}, {header: "Current price difference" ", width: 100, sortable: true, dataIndex: 'a6', renderer: change}, {header: "Increase and decrease", width: 100, sortable: true, dataIndex: 'a7', renderer: change }, {header: "Highest Price", width: 100, sortable: true, dataIndex: 'a8'}, {header: "Lowest Price", width: 100, sortable: true, dataIndex: ' a9'} ], stripeRows: true, autoExpandColumn: 'a1', height:240, width:740, title:'Stock Information List' }); if(document.getElementById("stockgrid").innerHTML == ""){ grid.render('stockgrid'); grid.getSelectionModel().selectFirstRow(); } grid.store.loadData(dataset); } }); } function change(val){ if(val < 0){ return '' val ' '; }else if(val > 0){ return '' val ' '; } return val; } Ext.onReady(function(){ //Correction When the page starts, it prompts to download 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); });
In the working directory Create a new stock.html file with the following code:
Stock Information < ;div id="stockgrid">
As you can see from here, using Ext technology, dynamic pages, from the page presentation layer to data acquisition, are all handled by Ext.