HTML设置为：
->head <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../../examples/ux/ProgressBarPager.js"></script>//进度条 <script type="text/javascript" src="../../examples/ux/PanelResizer.js"></script>//改变大小 <script type="text/javascript" src="../../examples/ux/PagingMemoryProxy.js"></script>//数据解析 <script type="text/javascript" src="gridWithProgressBarPager.js"></script>
->body <div id="grid-example"></div>
JS编写：
Ext.onReady(function() { //创建数据。 var myData = [ ['大唐集团',99.99,0.9,0.01,'9/1 12:00am'] ]; //change列的renderer渲染函数 function change(value) { if(value > 0) { return '<span style="color:green;">' + value + '</span>'; } else if(value < 0) { return '<span style = "color:red;">' + value + '</span>'; } return value; }; //pctChange列的renderer渲染函数 function pctChange(value) { if(value > 0) { return '<span style = "color:green;">' + value + '%</span>'; }else if(value < 0) { return '<span style = "color:red;">' + value + '%</span>'; } return value; }; //创建store。 var store = new Ext.data.Store({ proxy: new Ext.ux.data.PagingMemoryProxy(myData), remoteSort: true, sortInfo: {field: 'price', direction: 'ASC'}, reader: new Ext.data.ArrayReader({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change' ,type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }) }); //创建gridpanel。 var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id: 'company',header: 'company',width: 160,sortable: true,dataIndex: 'company'}, {header: 'Price', widhth: 75, sortable: true, renderer: 'usMoney',dataIndex: 'price'}, {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, autoExpandColumn: 'company', height: 320, width: 600, frame: true, title: 'SlidingPager', plugins: new Ext.ux.PanelResizer({ minHeight: 100 }), bbar: new Ext.PagingToolbar({ pageSize: 10, store: store, displayInfo: true, plugins: new Ext.ux.ProgressBarPager() }) }); grid.render('grid-example'); store.load({params: {start: 0, limit: 10}}); });
