在javaeye里面,看到了一篇非常不错的文章,主要介绍了EXT中的GridPanel的扩展,具体链接地址如下
http://www.javaeye.com/topic/155455
看完迫不及待的做了个demo的确好用,攒一下那位兄弟。
其实扩展组件主要有2种写法:
MyClass = Ext.extend(SuperClass, { /* */ });
Ext.extend(MyClass, SuperClass, { /* */});
例子(采用第一种写法)完整的js代码如下:
Ext.namespace("Ext.ux.grid");
Ext.ux.grid.SimpleGrid = Ext.extend(Ext.grid.GridPanel, {
// 表格结构
structure : '',
// 获取数据的URL
url : '',
// 默认排序字段
defaultSortField : '',
// 关键字段
keyField : '',
// 是否需要额外的过滤条件,默认为空
externalFilters : '',
// 是否需要分页工具栏,默认为true
needPage : true,
frame : true,
collapsible : true,
animCollapse : true,
loadMask : true,
viewConfig : {
forceFit : true
},
// private
initComponent : function() {
if (this.structure != '') {
this.initStructure();
}
Ext.ux.grid.SimpleGrid.superclass.initComponent.call(this);
if (!this.selModel) {
new Ext.grid.RowSelectionModel( {
singleSelect : true
});
}
},
// private
initEvents : function() {
Ext.grid.GridPanel.superclass.initEvents.call(this);
this.getStore().load( {
params : {
start : 0,
limit : 20
}
});
if (this.loadMask) {
this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {
store : this.store
}, this.loadMask));
}
},
// private
initStructure : function() {
var oCM = new Array();
var oRecord = new Array();
// 构成grid的三个组件: filters,column和record,根据structure将这三个组件创建出来
for (var i = 0, len = this.structure.length;i < len; i++) {
var c = this.structure[i];
// 如果字段为hidden,则不生成filters和columnMode
if (c.hidden == undefined || !c.hidden) {
oCM[oCM.length] = {
header : c.header,
dataIndex : c.name,
width : c.width,
// 类型为数字则右对齐
align : c.type == 'numeric' ? 'right' : 'left',
// 类型为日期则生成格式为xxxx-xx-xx
renderer : c.type == 'date'
? Ext.util.Format.dateRenderer('Y-m-d')
: Ext.grid.ColumnModel.defaultRenderer
};
}
oRecord[oRecord.length] = {
name : c.name,
// 如果类型不是date型则全部为string型
type : c.type == 'date' ? 'date' : 'string'
};
}
// 生成columnModel
this.cm = new Ext.grid.ColumnModel(oCM);
this.colModel = this.cm;
// 默认可排序
this.cm.defaultSortable = true;
//var filters = new Ext.ux.grid.GridFilters(oFilters);
// 生成表格数据容器
var record = Ext.data.Record.create(oRecord);
var reader = new Ext.data.JsonReader( {
totalProperty : "totalCount",
root : "result",
id : this.keyField
}, record);
this.ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : this.url
}),
reader : reader,
sortInfo : {
field : this.defaultSortField,
direction : 'ASC'
},
remoteSort : true
});
this.store = this.ds;
// 生成分页工具栏
if (this.needPage) {
var pagingToolbar = new Ext.PagingToolbar( {
displayInfo : true,
displayMsg : '当前记录数: {0} - {1} 总记录数: {2}',
emptyMsg : '没有符合条件的记录',
store : this.ds
});
pagingToolbar.pageSize = 30;
this.bbar = pagingToolbar;
this.bottomToolbar = this.bbar;
}
}
});
Ext.reg('simpleGrid', Ext.ux.grid.SimpleGrid);
这个代码可以单独作为一个文件Ext.ux.grid.MyCustomGrid.js在html引入。
调用的test.js代码:
Ext.onReady(function(){
var structure = [ {
name : 'basicUnitNo',
header : "No.",
width : 50
}, {
name : 'basicUnitName',
header : "基本单位名称",
width : 130
},{
name : 'test',
header : "No1",
hidden:true,
width : 50
}];
var grid = new Ext.ux.grid.SimpleGrid( {
id : 'basicUnitList-grid',
url : 'getBasicUnits.action',
defaultSortField : 'basicUnitNo',
keyField : 'basicUnitNo',
structure: structure,
//el : 'listForm',
width : 1000,
height : 500,
title : '基本单位列表'
});
var viewPort = new Ext.Viewport({
layout: 'border',
items: [grid]
});
});
test.html文件关键内容:
<script type="text/javascript" src="Ext.ux.grid.MyCustomGrid.js"></script>
<script type="text/javascript" src="test.js"></script>
运行效果截图如下: