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 + "\
" +
            " ：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\
" +
            " record ：" + record + "， \
" +
            " " + rowIndex + " \
" +
            " " + columnIndex + " \
" +
            " 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 //  
	});
});