前因:
项目需要,快速DEMO,采用EXT组件,想在纯HTML+JS的环境下给客户展示分页效果
后果:
example、API都没有找到,想组合Array Grid 和 Paging两个示例,达不到目的...
GG、BAIDU,找到 高手提供 示例链接:http://ido.nl.eu.org/ext-pagingmemoryproxy/
EXT论坛相关帖子:http://extjs.com/forum/showthread.php?p=56759
恩,要学好E文啊!自勉!
附高手扩展的data.proxy的代码:
js 代码
- /*
- * Ext JS Library 1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://www.extjs.com/license
- */
- /**
- * Ext.ux.data.PagingMemoryProxy.js
- *
- * A proxy for local / in-browser data structures
- * supports paging / sorting / filtering / etc
- *
- * @file Ext.ux.PagingMemoryProxy.js
- * @author Ing. Ido Sebastiaan Bas van Oostveen
- *
- * @changelog:
- * @version 1.3
- * @date 30-September-2007
- * - added customFilter config option
- * @version 1.2
- * @date 29-September-2007
- * - fixed several sorting bugs
- * @version 1.1
- * @date 30-August-2007
- * @version 1.0
- * @date 22-August-2007
- *
- */
- Ext.namespace("Ext.ux");
- Ext.namespace("Ext.ux.data");
- /* Fix for Opera, which does not seem to include the map function on Array's */
- if(!Array.prototype.map){
- Array.prototype.map = function(fun){
- var len = this.length;
- if(typeof fun != "function"){
- throw new TypeError();
- }
- var res = new Array(len);
- var thisp = arguments[1];
- for(var i = 0; i < len; i++){
- if(i in this){
- res[i] = fun.call(thisp, this[i], i, this);
- }
- }
- return res;
- };
- }
- /* Paging Memory Proxy, allows to use paging grid with in memory dataset */
- Ext.ux.data.PagingMemoryProxy = function(data, config) {
- Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
- this.data = data;
- Ext.apply(this, config);
- };
- Ext.extend(Ext.ux.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
- customFilter: null,
- load : function(params, reader, callback, scope, arg) {
- params = params || {};
- var result;
- try {
- result = reader.readRecords(this.data);
- } catch(e) {
- this.fireEvent("loadexception", this, arg, null, e);
- callback.call(scope, null, arg, false);
- return;
- }
- // filtering
- if (this.customFilter!=null) {
- result.records = result.records.filter(this.customFilter);
- result.totalRecords = result.records.length;
- } else if (params.filter!==undefined) {
- result.records = result.records.filter(function(el){
- if (typeof(el)=="object"){
- var att = params.filterCol || 0;
- return String(el.data[att]).match(params.filter)?true:false;
- } else {
- return String(el).match(params.filter)?true:false;
- }
- });
- result.totalRecords = result.records.length;
- }
- // sorting
- if (params.sort!==undefined) {
- // use integer as params.sort to specify column, since arrays are not named
- // params.sort=0; would also match a array without columns
- var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
- var fn = function(r1, r2){
- return r1==r2 ? 0 : r1
- };
- var st = reader.recordType.getField(params.sort).sortType;
- result.records.sort(function(a, b) {
- var v = 0;
- if (typeof(a)=="object"){
- v = fn(st(a.data[params.sort]), st(b.data[params.sort])) * dir;
- } else {
- v = fn(a, b) * dir;
- }
- if (v==0) {
- v = (a.index < b.index ? -1 : 1);
- }
- return v;
- });
- }
- // paging (use undefined cause start can also be 0 (thus false))
- if (params.start!==undefined && params.limit!==undefined) {
- result.records = result.records.slice(params.start, params.start+params.limit);
- }
- callback.call(scope, result, arg, true);
- }
- });
应用示例代码:
js 代码
- var Example = {
- init : function(){
- // some data yanked off the web
- var myData = [
- ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
- ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
- ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
- ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
- ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
- ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
- ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
- ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
- ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
- ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
- ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
- ];
- var ds = new Ext.data.Store({
- proxy: new Ext.ux.data.PagingMemoryProxy(myData),
- reader: new Ext.data.ArrayReader({}, [
- {name: 'company'},
- {name: 'price', type: 'float'},
- {name: 'change', type: 'float'},
- {name: 'pctChange', type: 'float'},
- {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ])
- });
- ds.load();
- // example of custom renderer function
- function italic(value){
- return '' + value + '';
- }
- // example of custom renderer function
- function change(val){
- if(val > 0){
- return '"color:green;">' + val + '';
- }else if(val < 0){
- return '"color:red;">' + val + '';
- }
- return val;
- }
- // example of custom renderer function
- function pctChange(val){
- if(val > 0){
- return '"color:green;">' + val + '%';
- }else if(val < 0){
- return '"color:red;">' + val + '%';
- }
- return val;
- }
- // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
- // custom or reusable ColumnModels
- var colModel = new Ext.grid.ColumnModel([
- {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
- {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.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'}
- ]);
- // create the Grid
- var grid = new Ext.grid.Grid('grid-example', {
- ds: ds,
- cm: colModel,
- autoExpandColumn: 'company',
- selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
- enableColLock:false,
- enableDragDrop:false,
- loadMask: true
- });
- var layout = Ext.BorderLayout.create({
- center: {
- margins:{left:3,top:3,right:3,bottom:3},
- panels: [new Ext.GridPanel(grid)]
- }
- }, 'grid-panel');
- grid.render();
- var gridFooter = grid.getView().getFooterPanel(true);
- var paging = new Ext.PagingToolbar(gridFooter, ds, {
- pageSize: 5,
- displayInfo: true,
- displayMsg: '当前记录 {0} - {1} ,共 {2}',
- emptyMsg: "No queues to display"
- });
- ds.load({params:{start:0, limit:5}});
- }
- };
- Ext.onReady(Example.init, Example);
附:
在EXT2.0里,已经不支持 grid.getView().getFooterPanel(true) 啦。直接作为bbr定义在Ext.grid.GridPanel里。