Home >Web Front-end >JS Tutorial >Use EXT to dynamically call stock information without refreshing_YUI.Ext related

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

WBOY
WBOYOriginal
2016-05-16 18:59:07969browse

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:



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.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:js form action dynamic modification method_form effectsNext article:js form action dynamic modification method_form effects

Related articles

See more