/**//**//**//*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email]licensing@extjs.com[/email]
*
* [url]http://extjs.com/license[/url]
*/
Ext.onReady(function(){
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var proxy=new Ext.data.HttpProxy( {url:'ArrayGridService.svc/GetStocks'});
// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
//定义reader
var reader=new Ext.data.JsonReader(
{
},[
{name: 'company'},
{name: 'price'},
{name: 'change'},
{name: 'pctChange',mapping:'changepercent'},
{name: 'lastChange',mapping:'lastupdated'}
]
)
//构建Store
var store=new Ext.data.Store( {
proxy:proxy,
reader:reader
});
//载入
store.load();
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "公司", width: 160, sortable: true, dataIndex: 'company'},
{header: "单价", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "变动", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "变动百分比", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "最后更新", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('Y年m月d日'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'股市行情',
viewConfig:
{
columnsText:'列',
sortAscText:'升序',
sortDescText:'降序'
}
});
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});
