gridPanel代码

 function createGrid(){
	var sm = new Ext.grid.RowSelectionModel() ;
	
	sm.addListener('rowselect',function(theSelect, rowIndex, r){
		alert('你选中了第' + ++rowIndex + '行') ;
		alert(r.get('name')) ;
	}) ;
	
	var colModel = new Ext.grid.ColumnModel([
    	{ header: "id", width: 60 , dataIndex : 'id' , align: 'right' , resizable : false ,hidden : true},
    	{ header: "name", width: 150, dataIndex : 'name' , resizable : false},
    	{ header: "sex", width: 50, dataIndex : 'sex',resizable : false,renderer:function(value){
	    		if(value == 'male'){
	    			return "<span style='color:red'>男</span>" ;
	    		}else{
	    			return "<span style='color:green'>女</span>" ;
	    		}
    		} 	
    	},
    	{ header: "descn", width: 100, dataIndex : 'descn', resizable : false}
 	]);
 
 	var data = [
 		['1' , 'cavin' , 'male','hibernate'],
 		['2' , 'rod' , 'male','spring'],
 		['3' , 'ayi' , 'female','struts']
 	] ;
 
 	var ds = new Ext.data.Store({
 		proxy : new Ext.data.MemoryProxy(data) ,
 		reader : new Ext.data.ArrayReader({
    		idIndex: 0
			}, [
					{name: 'id' },  
			    	{name: 'name'},
			    	{name: 'sex'},
			    	{name: 'descn'} 
    		]
    	)
 	}) ;
 
 	var grid = new Ext.grid.GridPanel({
    	store: ds,
   		cm : colModel,
    	width: 400,
    	height: 100,
    	sm : sm,
    	stripeRows : true
	});

	ds.load() ;
	grid.render('grid') ;
}

var myPageSize = 10;