如附件图片
:arrow:
Ext.onReady(function(){
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
// example of custom renderer function
function change(value){
if(value > 1){
return '<span style="color:green;">' + value + '%</span>';
}else if(value < 1){
return '<span style="color:red;">' + value + '%</span>';
}
return value;
}
// data
var myData = [
['公司 A',71.72,0.02,0.03,'9/1 12:00am'],
['公司 B',29.01,1.42,1.47,'9/1 12:00am'],
['公司 C',83.81,2.28,0.34,'9/1 12:00am']
];
// simpleStore
var store = new Ext.data.SimpleStore({
data:myData, // store.loadData(myData);
fields:[
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// load data
// store.loadData(myData);
// columns
var colM = new Ext.grid.ColumnModel(
[
{id:'company',header: "公司",sortable: true, dataIndex: 'company'},
{header: "价格",sortable: true,renderer:'usMoney',dataIndex: 'price'}, // renderer: fn
{header: "Change",sortable: true,renderer:change,dataIndex: 'change'},
{header: "% Change", sortable: true, dataIndex: 'pctChange'},
{header: "更新日期", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
);
// create new grid
var grid = new Ext.grid.GridPanel({
store:store,
cm:colM,
stripeRows: true, // 隔行换色
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});