I recently started to be interested in ExtJS. Today I am free. It took some time to write an Ext-based example. To tell the truth, I am still not very familiar with Ext technology, so I think it is strange to write code. What's wrong with it.
The Ext version used is a ext-2.2, which is: http://www.extjs.com/products/extjs/download.php
Download the Ext JS 2.2 SDK, decompress the SDK, and copy the resources folder to the working directory.
Create a jscript folder under the resources folder, and copy the ext-all.js file and adapter \ ext \ ext-base.js file under the ext root directory to the jscript folder, and create a new stock. js file, the Code is as follows:
The Code is as follows:
Function ajaxRequest (){
Ext. Ajax. request ({
Url: 'http: // response ,',
Success: function (response ){
Var stocks = response. responseText. split (';');
Var length = stocks. length-2;
Var dataset = new Array (length );
For (var I = 0; 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: "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: "opening today", width: 100, sortable: true, dataIndex: 'a4 '},
{Header: "close yesterday", width: 100, sortable: true, dataIndex: 'a5 '},
{Header: "current price difference", width: 100, sortable: true, dataIndex: 'a6 ', renderer: change },
{Header: "increase/decrease", width: 100, sortable: true, dataIndex: 'a7 ', renderer: change },
{Header: "maximum 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 info view'
});
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 (){
// Fixed the problem that the system prompts you to download http://extjs.com/s.gifwhen starting the page.
Ext. BLANK_IMAGE_URL = "resources/images/default/s.gif ";
Ext. state. Manager. setProvider (new Ext. state. CookieProvider ());
AjaxRequest ();
Windows. setInterval ("ajaxRequest ()", 3000 );
});
Create a new stock.html file in the work directory. The Code is as follows:
The Code is as follows:
Stock Information