ExtJs

/*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());         /**数据*/     var myData = [         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],         ['American Company',53,-0.01,0.02,'9/1 12:00am']     ];     /**数据颜色显示功能：<span>标签的使用。*/     function change(val){         if(val > 0){             return '<span style="color:green;">' + val + '</span>';         }else if(val < 0){             return '<span style="color:red;">' + val + '</span>';         }         return val;     }     /**百分号添加函数：使用<span>标签。*/     function pctChange(val){         if(val > 0){             return '<span style="color:green;">' + val + '%</span>';         }else if(val < 0){             return '<span style="color:red;">' + val + '%</span>';         }         return val;     }     /**数据存储器store:ArrayStore*/     var store = new Ext.data.ArrayStore({    //配置参数必有：fields。         fields: [            {name: 'company'},            {name: 'price', type: 'float'},            {name: 'change', type: 'float'},            {name: 'pctChange', type: 'float'},            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}         ]     });     store.loadData(myData);    //说明：把数据DATAload进来。     /**创建GridPanel*/     var grid = new Ext.grid.GridPanel({    //说明参数配置项：数据存储器store，列信息：columns         store: store,         columns: [             {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},    //提醒：要有id。             {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},    //提醒：时间渲染也可以这样：Ext.util.Format.usMoney。             {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},             {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},             {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}         ],         stripeRows: true,    //说明：true将会对行使用条纹。         autoExpandColumn: 'company',    //说明：列自动扩展。         height:350,         width:600,         title:'Array Grid'     });     grid.render('grid-example');    //说明：GridPanel渲染。         /**      * 创建GridPanel小结：GridPanel参数配置：store(fields、data),columns。这是基础必须项。      */     });