Use EXT to dynamically call stock information without refreshing_YUI.Ext related

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:

Copy code 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:

Copy the code The code is as follows:

< ;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.