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 "<span style='color:red;font-weight:bold;'>红男</span><img src='../images/user_male.png' />";
        } else {
            return "<span style='color:green;font-weight:bold;'>绿女</span><img src='../images/user_female.png' />";
        }
    }
    function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
        var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
            "这个单元格的值是：" + value + "\\n" +
            "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
            "这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
            "这是第" + rowIndex + "行\\n" +
            "这是第" + columnIndex + "列\\n" +
            "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
            "\")'>";
        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 // 隔行换色
	});
});