ExtJS组件 - GridPanel ①

如附件图片

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();
});