ExtJS组件 - GridPanel DEMO

Ext.onReady(function()
{
	Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';

	 function renderSex(value) {
        if (value == 'male') {
            return "红男";
        } else {
            return "绿女";
        }
    }
    function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
        var str = "";
        return str;
    }
    // PersonRecord
	var PersonRecord = new Ext.data.Record.create(
			[
			{name:'id',type:'int'},
            {name:'sex',type: 'string'},
            {name:'name'},
            {name:'descn'}]
	);    
	//	data
	var myData = [
		['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
	];
	//cm
	var cm = new Ext.grid.ColumnModel([
		{header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',renderer:renderSex},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn',renderer:renderDescn}]
	);

	//	store
	var store = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),
		reader: new Ext.data.ArrayReader({},PersonRecord)
	});
	store.load();
	//	gridpanel
	var gridPanel = new Ext.grid.GridPanel({
		title:'Ext.grid.GridPanel',
		autoHeight:true,
		renderTo:'grid',
		store:store,
		cm:cm,
		stripeRows: true // 隔行换色
	});
});