创建EXT支持分页的Array Grid（收集整理）

xiongmao3

浏览: 42827 次
性别:
来自: 长沙

最近访客更多访客>>

msnqu

ahodi不回头

monk0123456

cherayliu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT prototype Opera PHP J#

前因：

项目需要，快速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
* 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<r2 ? -1 : 1;
};
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 '' + val + '';
}else if(val < 0){
return '' + val + '';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '' + val + '%';
}else if(val < 0){
return '' + 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里。

分享到：

设置Ext.grid.PropertyGrid中value值编 ... | 关于EXT

2007-11-28 16:35
浏览 4404
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

创建EXT支持分页的Array Grid（收集整理）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

创建EXT支持分页的Array Grid（收集整理）

评论

发表评论

相关推荐

EXT2.0 override方法的一个问题发现 及自我救赎 及等待救赎(非水)

调整可编辑表格的列头高度、列高度、留白

EXT.DD的drop操作,Target是同group中父子关系的子DropTarget时的处理

变更Ext Window 当modal:true时的灰色背景

设置Ext.grid.PropertyGrid中value值 编辑属性为只读

关于EXT

修改Ext.MessageBox 的按钮文字

今日入窝

最近访客更多访客>>

EXT2.0 override方法的一个问题发现及自我救赎及等待救赎(非水)

设置Ext.grid.PropertyGrid中value值编辑属性为只读