>웹 프론트엔드 >JS 튜토리얼 >EXT를 사용하여 Refresh_YUI.Ext 관련 없이 주식 정보를 동적으로 호출합니다.

EXT를 사용하여 Refresh_YUI.Ext 관련 없이 주식 정보를 동적으로 호출합니다.

WBOY
WBOY원래의
2016-05-16 18:59:07988검색

솔직히 저는 아직 Ext 기술에 대해 잘 알지 못해서 제가 작성한 코드가 이상하다고 느껴지면 알려주시면 감사하겠습니다.
사용된 Ext 버전은 ext-2.2이며, 다운로드 주소는 http://www.extjs.com/products/extjs/download.php
입니다. Ext JS 2.2 SDK를 다운로드하고 리소스 폴더의 압축을 풀고 작업 디렉터리에 복사합니다.
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 데이터 세트 = 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[1] = 이름;
data_i[3] = tday_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({
필드: [
{이름: 'a1'},
{이름: 'a2'},
{이름: 'a3'},
{이름: 'a4'},
{이름: 'a5' },
{이름: 'a6'},
{이름: 'a7'},
{이름: 'a8'},
{이름: 'a9'}
]
});
//store.loadData(dataset);
vargrid = new Ext.grid.GridPanel({
//renderTo: document.body ,
store: store,
columns: [
{header: "Stock Code", 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', 렌더러: 변경 },
{header: "최고 가격", width: 100, sortable: true, dataIndex: 'a8'},
{header: "최저 가격" , 너비: 100, 정렬 가능: 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)
}
}); {
if(val < 0){
return '' val ''
}else if(val > 0){
return 'return val; onReady(function(){
//Correction 페이지가 시작되면 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 파일을 만듭니다.




코드 복사


코드는 다음과 같습니다.



주식 정보