代码主要参考ext 2.0的example ,这里加上自己的注释,包括某些参数的含义.
使用ext2.0创建表格很简单:
第一:准备表头,使用Ext.grid.ColumnModel
第二:准备数据,使用Ext.data.Store
第三:创建表格,使用Ext.grid.GridPanel,同时把以上的表头和数据放进去。
Ext.onReady(function() {
/**
* 首先是创建表格的ColumnModel,即定义grid的各个列:
* Ext.grid.ColumnModel([{
* id: 列的唯一标识,可以用于定义css,如:(.x-grid-td-topic b { color:#333 })
* header: 列的名称
* dataIndex: 在store中本列值的索引
* sortable: 设置本列是否支持排序
* renderer: 列值的渲染函数,定义函数如:function renderName(value, cellmeta, record, rowIndex, columnIndex, store){}
* width : 列宽
* hidden:true 是否隐藏本列
* }]);
*/
var sm = new Ext.grid.CheckboxSelectionModel();// 多选行
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
header : '编号',
dataIndex : 'id',
sortable : true
}, {
id : 'topic',
header : '名称',
dataIndex : 'name',
renderer : renderName,
width : 150
}, {
id : 'topic',
header : '描述',
renderer : renderName,
dataIndex : 'descn'
}]);
/**
* 准备数据,
*/
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'gridDataJson.jsp'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root',
fields : [{
name : 'id'
}, {
name : 'name'
}, {
name : 'descn'
}]
}),
remoteSort : true
});
/**
* 创建表格面板,各参数见下注释
*
*/
var grid = new Ext.grid.GridPanel({
width : 450,
height : 275,
//title : 'Ext表格控件',
el : 'grid-div', //表格依附对象id ,一般是一个DIV
ds : ds,// store : ds, //表格数据对象:Ext.data.Store
cm : cm, //表头,即ColumnModel
sm : sm, //选择行,即CheckboxSelectionModel
//视图配置
viewConfig : {
forceFit : true,
enableRowBody : true,
showPreview : false,//是否预览
getRowClass : function(record, rowIndex, p, store) {
//p: 预览内容在页面上的放置的对象,
if (this.showPreview) {
p.body = '<p>' + record.data.descn
+ '[----摘要----]</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
//分页工具栏显示在底部,如果要显示在顶部用tbar(top bar)
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录,共:{2}条',
emptyMsg : "没有记录",
items : ['-', {
pressed : true,
enableToggle : true,
text : '预览',
cls : 'x-btn-text-icon details',
toggleHandler : toggleDetails
}]
})
});
grid.render();
ds.load({
params : {
start : 0,
limit : 10
}
});
function toggleDetails(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
};
}
)
// 为特定行显示值 进行渲染。
function renderName(value) {
return "<a href='xqxq' target='_blank' >" + value + " [----]</a></b>"
}
function renderName2(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' onclick='alert(\""
+ "这个单元格的值是:" + value + "\\n" + "这个单元格的配置是:{cellId:"
+ cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css
+ "}\\n" + "这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" + "这是第"
+ rowIndex + "行\\n" + "这是第" + columnIndex + "列\\n"
+ "这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" + "\")'>";
return str;
}
- 大小: 531.1 KB
分享到:
相关推荐
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
Ext 2.0 - API Documentation
资源名称:Ext2.0学习入门资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
EXT 2.0学习资料 关于EXT的基本入门学习的PDF
我的资源不需要积分 EXT2.0 GRID 示例 很实用
官方版本,亲测可用
EXT2.0的API文档
ext2.0学习文档,很好用的哦。 看了受益匪浅,所以上传大家一起分享
ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题
Ext2.0 中文文档。
前端开源库-style-ext-html-webpack-pluginStyleExtHTML Webpack插件,通过启用内嵌样式增强HTML Webpack插件功能。
著名的ext 2.0学习手册,很容易上手,如果有想学习ext的,可以参照这本手册来进行。
extjs是从yui-ext发展来的一套ajax控件,在下认为它是当今最好用的js控件库了,非常有学习的价值。 如果没听说过extjs或者对extjs没有兴趣,请不要继续看下去。 extjs是一套完整的富客户端解决方案,也因为功能完整...
Ext2.0框架的Grid的使用 开放前台 美观页面
在网上搜索了一大篇,终于找到啦,不敢独享,现发出来,希望能帮到大家EXT2.0 中文API
ext2.0 DateTimeField控件 自带ext2.0 里面有例子,不懂的可以直接看例子。 datefield扩展控件,可以显示时分秒
Ext2.0实用简明教程.pdf
1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载...
ext4magic-0.3.2-3.10.x86_64.rpm