PDA

View Full Version : Ext.ux.grid.ProgressColumn plugin



KRavEN
6 Jun 2008, 5:36 AM
Ext.ux.grid.ProgressColumn is a grid plugin that shows a progress bar for a number between 0 and 100 to indicate some sort of progress. The plugin supports all the normal cell/column operations including sorting, editing, dragging, and hiding. It also supports special progression coloring or standard Ext.ProgressBar coloring for the bar.

This is based off the work started here: http://extjs.com/forum/showthread.php?t=36291

You can extract the attached zip file into the examples folder to see a demo.

This has been tested working in FF2 and IE6

Edited: tweaked the css a little bit to so the dirty indicator displays correctly

Edit 2: Fixed the IE6 problem with an ugly little hack, but it works

Eric24
6 Jun 2008, 9:59 AM
It's a very cool plugin, but I'm curious: Why not do this as a custom renderer? What makes the plugin approach necessary?

KRavEN
9 Jun 2008, 5:16 AM
You just have more flexibility with a plugin.

Fabyo
10 Jun 2008, 4:00 AM
Thank you for that plugin

was the good part of editing

I would only give a sujest

alienwebz
27 Jun 2008, 1:01 PM
When I download the files they say it is corrupt could some one email them to me? matthew.003@hotmail.com

fangzhouxing
28 Jun 2008, 5:56 AM
very nice! Thank you for sharing!

I found a error in line 151 of file progress-grid.js, it should like this:


var p = new Plant({
common : 'New Plant 1',
light : 'Mostly Shade',
price : 0,
availDate : (new Date()).clearTime(),
indoor : false,
growth : 80 <-------- added by me
});

jrpqwerty
10 Jul 2008, 2:59 AM
zipfile appears to be corrupted downloads with correct size but winzip thinks its not a valid archive

mystix
10 Jul 2008, 4:35 AM
zipfile appears to be corrupted downloads with correct size but winzip thinks its not a valid archive
works fine for me.

Use FF. IE frequently craps out on this forum's attachments.

Fabyo
10 Jul 2008, 7:46 AM
When the value of the field "growth" he is = or >100 of that error, while more edit:


this.config[A] has no properties
Ext.grid.ColumnModel=function(A){this.defaultWidth=100;this.defaultSortable=fals...

mystix
10 Jul 2008, 6:10 PM
When the value of the field "growth" he is = or >100 of that error, while more edit:


this.config[A] has no properties
Ext.grid.ColumnModel=function(A){this.defaultWidth=100;this.defaultSortable=fals...
maybe you should post some code to demonstrate the bug.
(i have no idea what you just tried to describe)

Fabyo
11 Jul 2008, 3:15 AM
Make a test and edit a field with the value 100, then try to edit the same field again

KRavEN
16 Jul 2008, 10:46 AM
I think I fixed that bug. I'll make sure and upload a new version

chemist458
16 Jul 2008, 4:23 PM
Dear Kraven,
I stumbled across this plugin, and wow, is wicked!
I was using google charts instead, and it look much better with your progress columns!!
Good work
George

Ximosoft
18 Jul 2008, 6:13 AM
Nice work, you did what i wanted to do!

And thanks for give me credit.

jelt
2 Aug 2008, 2:29 AM
Nice work, keep it up :)

neon22
2 Aug 2008, 2:42 AM
This is a really nice simple extension.
I wonder if you could help those of us less familiar with how to do this by detailing your working process.
E.g. well it needs a renderer, so to do that I also need to do this, and that means we better have one of these as well, etc ?

Would you mind ? I would greatly appreciate it to better understand the process I need to follow to make these kinds of extensions.
Thanks...

P.S. the doc on the textPst seems to be for colored option instead :-)

marcov
13 Aug 2008, 11:13 AM
Ext.ux.grid.ProgressColumn is a grid plugin that shows a progress bar for a number between 0 and 100 to indicate some sort of progress... ... ...

It does not work for me on ext 2.2; it shows the grid but it does not load any
data. I added the missing "growth: 50" on line 51 of progress-grid.js. :-/

Is there a working demo of your version online somewhere?

galdaka
13 Aug 2008, 12:28 PM
http://www.jadacosta.es/extjs/examples/progresscolumn/progress-grid.html

Greetings,

marcov
13 Aug 2008, 2:02 PM
Thank you Galdaka, I downloaded your live example files and this time it worked.

KRavEN
20 Aug 2008, 4:13 AM
This is a really nice simple extension.
I wonder if you could help those of us less familiar with how to do this by detailing your working process.
E.g. well it needs a renderer, so to do that I also need to do this, and that means we better have one of these as well, etc ?

Would you mind ? I would greatly appreciate it to better understand the process I need to follow to make these kinds of extensions.
Thanks...

P.S. the doc on the textPst seems to be for colored option instead :-)
I'm going to refactor this one soon to make it more simple and fully 2.2 compliant. I also plan on changing it to add the css dynamically so you won't have to do a seperate include for the css. When I do, I'll make sure to comment things a lot more so you can follow along.

gotcha
2 Sep 2008, 6:12 PM
Hi.. this plugin sure is wicked.

But.. I was wondering how to get the below done ??

1. The progress bar to take the size of the cell. Meaning, if the cell is like a square, the progress bar should take the size of the square and not remain a horizontal rectangle.

2. The progress indicator should go from bottom to top and not from left to right.

3. The 'TEXT' that is displayed is taken from 'renderer' while the the progress bar indicator value is taken from 'dataIndex'.

How to do the above? Any help will be greatly appreciated!!!

I have attached piece of code - just drop it in the examples directory.

Thanks!

hansellh
25 Sep 2008, 2:20 AM
Is there a simple way to make the bars right align, rather than left align?

Thanks

bill_wang
14 Jan 2009, 12:10 AM
:D

xantus
14 Jan 2009, 9:21 PM
Great work

tonedeaf
24 Feb 2009, 7:13 AM
I needed this plugin to display actual numbers, while retaining the colored bars as per the percentage.

Here's an example of what I wanted, the maximum number which can be displayed is 20, while the progress bar is 75% full at number 15
http://img6.imageshack.us/img6/6623/progress.png

so, I added a new config parameter: ceiling, which allows to specify the maximum value displayed, and will be used to calculate the percentages.



Ext.namespace('Ext.ux.grid');

Ext.ux.grid.ProgressColumn = function(config) {
Ext.apply(this, config);
this.renderer = this.renderer.createDelegate(this);
this.addEvents('action');
Ext.ux.grid.ProgressColumn.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.ProgressColumn, Ext.util.Observable, {
/**
* @cfg {Integer} upper limit for full progress indicator (defaults to 100)
*/
ceiling : 100,
/**
* @cfg {String} symbol appended after the numeric value (defaults to %)
*/
textPst : '%',
/**
* @cfg {String} colored determines whether use special progression coloring
* or the standard Ext.ProgressBar coloring for the bar (defaults to
* false)
*/
colored : false,
/**
* @cfg {String} actionEvent Event to trigger actions, e.g. click, dblclick,
* mouseover (defaults to 'dblclick')
*/
actionEvent : 'dblclick',

init : function(grid) {
this.grid = grid;
this.view = grid.getView();

if (this.editor && grid.isEditor) {
var cfg = {
scope : this
};
cfg[this.actionEvent] = this.onClick;
grid.afterRender = grid.afterRender.createSequence(function() {
this.view.mainBody.on(cfg);
}, this);
}
},

onClick : function(e, target) {
var rowIndex = e.getTarget('.x-grid3-row').rowIndex;
var colIndex = this.view.findCellIndex(target.parentNode.parentNode);

var t = e.getTarget('.x-progress-text');
if (t) {
this.grid.startEditing(rowIndex, colIndex);
}
},

renderer : function(v, p, record) {
var style = '';
var textClass = (v < (this.ceiling / 2)) ? 'x-progress-text-back' : 'x-progress-text-front' + (Ext.isIE6 ? '-ie6' : '');
//ugly hack to deal with IE6 issue
var text = String.format('</div><div class="x-progress-text {0}" style="width:100%;" id="{1}">{2}</div></div>',
textClass, Ext.id(), v + this.textPst
);
text = (v < (this.ceiling / 1.05)) ? text.substring(0, text.length - 6) : text.substr(6);

if (this.colored == true) {
if (v <= (this.ceiling * 0.75) && v > (this.ceiling * 0.50))
style = '-green';
if (v <= (this.ceiling * 0.50) && v > (this.ceiling * 0.25))
style = '-orange';
if (v <= (this.ceiling * 0.25))
style = '-red';
}

p.css += ' x-grid3-progresscol';
v = (v / this.ceiling) * 100;
// don't display the progress widget, if the cell doesn't have a valid number or its zero
if(v == 0) {
return '';
} else {
return String.format('<div class="x-progress-wrap"><div class="x-progress-inner"><div class="x-progress-bar{0}" style="width:{1}%;">{2}</div>' +
'</div></div>', style, v, text);
}
}
});

mankz
24 Feb 2009, 10:57 AM
Nice work!

I was thinking of doing exactly the same thing but you beat me to it. Sometimes being lazy pays off :)

mankz
11 Mar 2009, 9:15 AM
I modified it to account for changes made to the grid. After store is loaded, the max is calculated and after any edit, the new highest value is also calculated. Changes in bold:


Ext.namespace('Ext.ux.grid');

Ext.ux.grid.ProgressColumn = function(config) {
Ext.apply(this, config);
this.renderer = this.renderer.createDelegate(this);
this.addEvents('action');
Ext.ux.grid.ProgressColumn.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.ProgressColumn, Ext.util.Observable, {
/**
* @cfg {Integer} upper limit for full progress indicator (defaults to 100)
*/
ceiling : 100,

/**
* @cfg {String} symbol appended after the numeric value (defaults to %)
*/
textPst : '%',
/**
* @cfg {String} colored determines whether use special progression coloring
* or the standard Ext.ProgressBar coloring for the bar (defaults to
* false)
*/
colored : false,
/**
* @cfg {String} actionEvent Event to trigger actions, e.g. click, dblclick,
* mouseover (defaults to 'dblclick')
*/
actionEvent : 'dblclick',

init : function(grid) {
this.grid = grid;
this.view = grid.getView();

if (this.editor && grid.isEditor) {
var cfg = {
scope : this
};
cfg[this.actionEvent] = this.onClick;
grid.afterRender = grid.afterRender.createSequence(function() {
this.view.mainBody.on(cfg);
}, this);
grid.on('afteredit', this.storeDataChanged, this);
}
grid.store.on('datachanged', this.storeDataChanged, this);
},

onClick : function(e, target) {
var rowIndex = e.getTarget('.x-grid3-row').rowIndex;
var colIndex = this.view.findCellIndex(target.parentNode.parentNode);

var t = e.getTarget('.x-progress-text');
if (t) {
this.grid.startEditing(rowIndex, colIndex);
}
},

// This is called on both store 'datachanged' and on grid 'afteredit'.
storeDataChanged : function(e) {
// Only interested in edit events for the progress column
if (e && e.field && e.field !== this.dataIndex) {
return;
}

var val = 0;

this.grid.store.each(function(o) {
var v = o.get(this.dataIndex) || 0;

if (o.get(this.dataIndex) > val) {
val = v;
}
}, this);

if (val !== this.ceiling) {
// Set the new highest value as ceiling
this.ceiling = val;

// Force a refresh of the view to make sure all rows are redrawn
this.grid.getView().refresh();
}
},

renderer : function(v, p, record) {
var style = '';
var textClass = (v < (this.ceiling / 2)) ? 'x-progress-text-back' : 'x-progress-text-front' + (Ext.isIE6 ? '-ie6' : '');
//ugly hack to deal with IE6 issue
var text = String.format('</div><div class="x-progress-text {0}" style="width:100%;" id="{1}">{2}</div></div>',
textClass, Ext.id(), v + this.textPst
);
text = (v < (this.ceiling / 1.05)) ? text.substring(0, text.length - 6) : text.substr(6);

if (this.colored === true) {
if (v <= (this.ceiling * 0.75) && v > (this.ceiling * 0.50))
style = '-green';
if (v <= (this.ceiling * 0.50) && v > (this.ceiling * 0.25))
style = '-orange';
if (v <= (this.ceiling * 0.25))
style = '-red';
}

p.css += ' x-grid3-progresscol';
v = (v / this.ceiling) * 100;
// don't display the progress widget, if the cell doesn't have a valid number or its zero
if(v == 0) {
return '';
} else {
return String.format('<div class="x-progress-wrap"><div class="x-progress-inner"><div class="x-progress-bar{0}" style="width:{1}%;">{2}</div>' +
'</div></div>', style, v, text);
}
}
});

tonedeaf
12 Mar 2009, 2:28 AM
Didn't think about the editing part in my changes, as I required it as read-only.

Glad to have you review and make the code better!

KRavEN
8 Jun 2009, 6:43 AM
some slight css fixes for keeping IE looking identical to Firefox:

td.x-grid3-progresscol {
vertical-align: middle;
border: 1px solid #8DB2E3;
}

.x-grid3-progresscol .x-grid3-cell-inner {
padding: 0px;
}

.x-grid3-progresscol .x-progress-bar {
height: 16px;
}

.x-grid3-progresscol .x-progress-inner {
height: 17px;
}

.x-grid3-progresscol .x-progress-text-front-ie6 {
padding: 2.5px 5px;
}

.x-grid3-progresscol .x-progress-text-front {
padding: 2px 5px;
}

.x-progress-bar-red,.x-progress-bar-orange,.x-progress-bar-green {
float: left;
height: 16px;
}

.x-progress-bar-red {
background: #ff0000 url(../images/progress-bg-red.gif) repeat-x scroll left
center;
border-top: 1px solid #ecb7ad;
}

.x-progress-bar-orange {
background: #9cbfee url(../images/progress-bg-orange.gif) repeat-x scroll
left center;
border-right: 1px solid #deab7e;
border-top: 1px solid #d7b290;
}

.x-progress-bar-green {
background: #00ff00 url(../images/progress-bg-green.gif) repeat-x scroll
left center;
border-right: 1px solid #5bd976;
border-top: 1px solid #79e18f;
}

KRavEN
8 Jun 2009, 7:41 AM
New version with some things split out of render to make extending easier.

I didn't incorporate mankz's changes because they always reset the ceiling to the largest value for that column in the store. This isn't always desirable. There needs to be a setting to disable that functionality.

Right now the cell is re-rendered after edit so the bar will reflect any edit changes and is handling edits as originally intended.

I also modified tonedeaf's color calculation back to a 1/3 split between green/orange/red


Ext.namespace('Ext.ux.grid');

Ext.ux.grid.ProgressColumn = function(config)
{
Ext.apply(this, config);
this.renderer = this.renderer.createDelegate(this);
this.addEvents('action');
Ext.ux.grid.ProgressColumn.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.ProgressColumn, Ext.util.Observable, {
/**
* @cfg {Integer} upper limit for full progress indicator (defaults to 100)
*/
ceiling : 100,
/**
* @cfg {String} symbol appended after the numeric value (defaults to %)
*/
textPst : '%',
/**
* @cfg {String} colored determines whether use special progression coloring
* or the standard Ext.ProgressBar coloring for the bar (defaults to
* false)
*/
colored : false,
/**
* @cfg {String} actionEvent Event to trigger actions, e.g. click, dblclick,
* mouseover (defaults to 'dblclick')
*/
actionEvent : 'dblclick',

init : function(grid)
{
this.grid = grid;
this.view = grid.getView();

if(this.editor && grid.isEditor){
var cfg = {
scope : this
};
cfg[this.actionEvent] = this.onClick;
grid.afterRender = grid.afterRender.createSequence(function()
{
this.view.mainBody.on(cfg);
}, this);
}
},

onClick : function(e, target)
{
var rowIndex = e.getTarget('.x-grid3-row').rowIndex;
var colIndex = this.view.findCellIndex(target.parentNode.parentNode);

var t = e.getTarget('.x-progress-text');
if(t){
this.grid.startEditing(rowIndex, colIndex);
}
},

getStyle : function(v)
{
if(this.colored === true){
if(v <= this.ceiling && v > (this.ceiling * 0.67)) return '-green';
if(v < (this.ceiling * 0.67) && v > (this.ceiling * 0.33)) return '-orange';
if(v < (this.ceiling * 0.33)) return '-red';
}
return '';
},

getText : function(v)
{
var textClass = (v < (this.ceiling / 2)) ? 'x-progress-text-back' : 'x-progress-text-front'
+ (Ext.isIE6 ? '-ie6' : '');

// ugly hack to deal with IE6 issue
var text = String.format('</div><div class="x-progress-text {0}" style="width:100%;" id="{1}">{2}</div></div>',
textClass, Ext.id(), v + this.textPst
);

return (v < (this.ceiling / 1.05)) ? text.substring(0, text.length - 6) : text.substr(6);
},

renderer : function(v, p, record)
{
p.css += ' x-grid3-progresscol';

return String
.format(
'<div class="x-progress-wrap"><div class="x-progress-inner"><div class="x-progress-bar{0}" style="width:{1}%;">{2}</div></div>',
this.getStyle(v), (v / this.ceiling) * 100, this.getText(v)
);
}
});
Ext.reg('progresscolumn', Ext.ux.grid.ProgressColumn);

antmangaka
30 Mar 2010, 2:06 PM
Hello,
Can you make this pluggin an xtype?


Thank you, btw great extension :)

KRavEN
23 Jul 2010, 9:20 AM
it is an xtype:

Ext.reg('progresscolumn', Ext.ux.grid.ProgressColumn);

use xtype: 'progresscolumn'.

I'll do a 3.x version soon and make it a ptype.

dcoan
14 Sep 2010, 11:40 PM
3.x version out yet (with ptype?)

Since it is an xtype, does that mean you could just say:

renderer: 'progresscolumn' for any column you want to use it?

aful
26 Jun 2011, 6:15 PM
how to set color of progressbar according the diffent data, if the rating smaller 50% i want the progressbar's color is red,and the data more then 50% ,the color is green and so on ,who can tell me the idea,thanks