ExtJS Grid进度条
正当自己在慢慢捉摸如何为Ext.Grid增加一个属性和为这个属性定义CSS的时候,在开源中国网站上发现了我思路的实现插件,如下:
ext-3.3.1\examples\ux\Ext.ux.grid.ProgressColumn.js
ext-3.3.1\examples\ux\css\Ext.ux.grid.ProgressColumn.css
于此同时,css样式文件需要用到的三张图片为【解压Ext包后自带有】:
ext-3.3.1\examples\ux\css\images\progress-bg-green.gif
ext-3.3.1\examples\ux\css\images\progress-bg-orange.gif
ext-3.3.1\examples\ux\css\images\progress-bg-red.gif
参照着该思路,以及提供的插件,做了一个示例,如下:
核心代码如下:
var sm = new Ext.grid.CheckboxSelectionModel();
var growthColumn = new Ext.ux.grid.ProgressColumn({
header : "办理进度",
dataIndex : 'growth',
width : 85,
textPst : '%',
actionEvent: 'click',
colored : true,
editor : new Ext.form.TextField()
});
ext-3.3.1\examples\ux\Ext.ux.grid.ProgressColumn.js
ext-3.3.1\examples\ux\css\Ext.ux.grid.ProgressColumn.css
于此同时,css样式文件需要用到的三张图片为【解压Ext包后自带有】:
ext-3.3.1\examples\ux\css\images\progress-bg-green.gif
ext-3.3.1\examples\ux\css\images\progress-bg-orange.gif
ext-3.3.1\examples\ux\css\images\progress-bg-red.gif
参照着该思路,以及提供的插件,做了一个示例,如下:
核心代码如下:
var sm = new Ext.grid.CheckboxSelectionModel();
var growthColumn = new Ext.ux.grid.ProgressColumn({
header : "办理进度",
dataIndex : 'growth',
width : 85,
textPst : '%',
actionEvent: 'click',
colored : true,
editor : new Ext.form.TextField()
});
var clickTTHistoryGrid = new Ext.grid.GridPanel({
id:'clickTTHistoryGrid',
title : '银行理财一栏',
store:store,
iconCls:'',
loadMask:{msg:'数据加载中...'},
border:false,
height:500,
columns: [
...,
growthColumn
]
});
附件:
Ext.Grid插件.rar 可以自己去下载