Ext.grid.GridPanel 显示数据

编写js文件
1. 数据,要显示到页面上的数据

var myData = [
				[	
					1,
				 	{
                    	text: 'Ext',
                    	url: 'http://extjs.com'
                	},
                	-10.00, 
                	'2008-01-01 12:01:01', 
                	'br.gif', 
                	'Atlantic Spadefish.jpg', 
               		{
                    	text: '一',
                    	tips: '提示1'
                	}
                ],
                
                [	
                	2, 
                	{
                    	text: 'Google',
                    	url: 'http://www.google.cn'
                	}, 
                	1.00, 
                	'2008-02-16 12:01:02', 
                	'fr.gif', 
                	'Bat Ray.jpg', 
                	{
                    	text: '二',
                    	tips: '提示2'
                	}
                ], 
             	[	
             		3, 
             		{
                    	text: '新浪',
                    	url: 'http://www.sina.com.cn'
                	}, 
                	0, 
                	'2008-03-15 12:01:03', 
                	'cu.gif', 
                	'Blue Angelfish.jpg', 
                	{
                    	text: '三',
                    	tips: '提示3'
                	}
                ], 
                [
                	4, 
                	{
                    	text: '雅虎',
                    	url: 'http://www.yahoo.com.cn'
                	}, 
                	10.01, 
                	'2008-04-14 12:01:04',
                	'es.gif', 
                	'Bluehead Wrasse.jpg', 
                	{
                    	text: '四',
                    	tips: '提示4'
                	}
                ], 
                [
                	5, 
                	{
                    	text: 'CSDN',
                    	url: 'http://www.csdn.net'
                	}, 
                	200.90, 
                	'2008-05-13 12:01:05', 
                	'cn.gif', 
                	'Cabezon.jpg', 
                	{
                    	text: '五',
                    	tips: '提示5'
                	}
                ]
           	];

装载入Ext.data.SimpleStore
把数据装载到一个简单的Store中

            var store = new Ext.data.SimpleStore({
//			设置 	编号, 	链接, 	数字,	时间,	图标,	图片提示,	文字提示
                    fields: [
                    	{
                        	name: 'id',type: 'int'  //编号
                   		},{
                        	name: 'linker'//链接
                    	},{
                        	name: 'number',type: 'float'//数字
                    	},{
                    		name: 'datetime',type: 'date',dateFormat: 'Y-m-d H:i:s'//时间
                    	},{
                        	name: 'icon'//图标
    					},{
                        	name: 'qtips'//图片提示
                   	 	},{
                        	name: 'tips'//文字提示
                    	}]
                });
                store.loadData(myData);

用最常用的GridPanel显示数据

               //定义方法，为数据载入表格时候有不同的显示
                
                function leftPadfun(val){
                    return String.leftPad(val, 5, "0");
                }
                
                /**
                 *  根据text: , url 生产一条完整的链接
                 */
                function linkerfun(val){
                    if (typeof val == 'object') {
                        return '<a style="display:table;width:100%;" title="' + val.url + '" target="_blank" href="' + val.url + '">' + val.text + '</a>'
                    }
                    return val;
                }
                
                /**
                 * 根据数值的大小分别显示不同的颜色
                 * 大于0		显示为绿色
                 * 小于0 	显示为红色
                 */
                function numfun(val){
                    if (val > 0) {
                        return '<span style="color:green;">' + val + '</span>';
                    }
                    else 
                        if (val < 0) {
                            return '<span style="color:red;">' + val + '</span>';
                        }
                    return val;
                }
                
                /**
                 * 得到图标的应用
                 */
                function iconfun(val){
                    return '<img src="images/' + val + '">'
                }
                
                /**
                 * 得到提示图片
                 * 添加qtip属性
                 * 要在HTML中使用QuickTip显示提示，只要在标记中加入qtip属性就可以了
                 * Ext.QuickTips.init();进行初始化
                 * 
                 */
                function qtipsfun(val){
                    return '<span style="display:table;width:100%;" qtip=\'<img src="images/' + val + '">\'>' + val + '</span>'
                }
                
                /**
                 * 包含提示的文字
                 */
                function tipsfun(val){
                    if (typeof val == 'object') {
                        return '<span style="display:table;width:100%;" title="' + val.tips + '">' + val.text + '</span>'
                    }
                    return val
                }
                 
                var grid = new Ext.grid.GridPanel({
                    height: 350,
                    width: 800,
                    store: store,
                    title: '自定义单元格的显示格式',
                    frame: true,
                    columns: [{
                        header: '编号',
                        width: 80,
                        sortable: true,
                        renderer: leftPadfun,
                        dataIndex: 'id'
                    }, {
                        header: "链接",
                        width: 75,
                        sortable: true,
                        renderer: linkerfun,
                        dataIndex: 'linker'
                    }, {
                        header: "数字",
                        width: 75,
                        sortable: true,
                        renderer: numfun,
                        dataIndex: 'number'
                    }, {
                        header: "时间",
                        width: 85,
                        sortable: true,
                        renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                        dataIndex: 'datetime'
                    }, {
                        header: "图标",
                        width: 75,
                        sortable: true,
                        renderer: iconfun,
                        dataIndex: 'icon'
                    }, {
                        header: "图片提示",
                        width: 75,
                        sortable: true,
                        renderer: qtipsfun,
                        dataIndex: 'qtips'
                    }, {
                        header: "文字提示",
                        width: 75,
                        sortable: true,
                        renderer: tipsfun,
                        dataIndex: 'tips'
                    }],
                    stripeRows: true,
                    autoExpandColumn: 5,
                    listeners: {
                    	
//						定义列单击时间监听
//                        rowclick: function(trid, rowIndex, e){
//                            Ext.get('op').dom.value += '------------------------\n' +
//                            Ext.encode(store.getAt(rowIndex).data) +
//                            '\n';
//                    	}
                    	rowclick : rowclickevent
                    }
                });
                
//             	对QuickTips进行初始化
                Ext.QuickTips.init();
                
                function rowclickevent(trid, rowIndex, e)
                {
                	Ext.get('op').dom.value += '------------------------\n' +
               		Ext.encode(store.getAt(rowIndex).data) + '\n';
                }

在html文件中显示出来

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>自定义单元格的显示格式</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
     	<!-- 引入必要的Ext库文件-->
     	<link rel="stylesheet" type="text/css" href="../Extjs/resources/css/ext-all.css" />
     	<!-- EXT LIB -->    
     	<script src="../Extjs/adapter/ext/ext-base.js"></script>
     	<script src="../Extjs/ext-all.js"></script>
     	<script type="text/javascript" src="1_Grid.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){
            
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
                
                
                Ext.Msg.minWidth = 300;

//				把表格加载到id为panell的div中
                grid.render('panel1');

//	              设置textarea为空
                Ext.get('op').dom.value = "";
            })
        </script>
    </head>
    <body>
        <h1 style="margin:20px 0px 0px 20px;">第4章 自定义单元格的显示格式</h1>
        <br/>
        <div style="padding-left:20px;">
             <div id="panel1">
             </div>
             
             <br>
             <div>事件：</div>
             <textarea id='op' rows="10" style="width:800px;"></textarea>
            <br/>
        </div>
    </body>
</html>