PDA

View Full Version : Ext.ux.ProgressColumn - a Column subclass to display progress bars in grid cells.



Animal
15 Sep 2009, 1:00 PM
Unzip the attached archive into examples/ux

18039

There is a class file, and a CSS file (Obviously you will want to edit the CSS to create your own appearance as demonstrated in the source below which uses images as backgrounds).

The code is fully commented with JSDoc style comments.

Then drop this example page into examples/grid to get an idea:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Progress Column Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ux/ProgressColumn.css" />

<!-- overrides to base library -->

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<style type=text/css>
.x-grid3-td-progress-cell .x-grid3-cell-inner {
font-weight: bold;
}

.x-grid3-td-progress-cell .high {
background: transparent url(../ux/images/progress-bg-red.gif) 0 -33px;
}

.x-grid3-td-progress-cell .medium {
background: transparent url(../ux/images/progress-bg-orange.gif) 0 -33px;
}

.x-grid3-td-progress-cell .low {
background: transparent url(../ux/images/progress-bg-green.gif) 0 -33px;
}

.x-grid3-td-progress-cell .ux-progress-cell-foreground {
color: #fff;
}
</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- overrides to base library -->
<script type="text/javascript" src="../ux/ProgressColumn.js"></script>

<!-- page specific -->
<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();

// sample static data for the store
var myData = [
['3m Co',71.72,70.64,'9/1 12:00am'],
['Alcoa Inc',29.01,24.5,'9/1 12:00am'],
['Altria Group Inc',83.81,42.1,'9/1 12:00am']
];

/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
new Ext.ux.ProgressColumn({
header: '% Change',
width: 105,
dataIndex: 'change',
divisor: 'price',
align: 'center',
renderer: function(value, meta, record, rowIndex, colIndex, store, pct) {
return Ext.util.Format.number(pct, "0.00%");
}
}),
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>
</head>
<body>
<h1>Progress Column Grid Example</h1>
<div id="grid-example"></div>
</body>
</html>

Animal
15 Sep 2009, 11:41 PM
And obviously, you can use background images and different text colours on the classes returned by the getBarClass method:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/progress-column-graphical-1.jpg

jay@moduscreate.com
16 Sep 2009, 2:34 AM
Friggin sharp dude!

mask_hot
24 Feb 2010, 2:25 AM
Hi Nigel,

I don't have the progress bar well displayed.
I set no divisor nor dividend as my value is the progress status. So I thought I had to set the divisor to 100 but with no success.

Any idea?

mask_hot
24 Feb 2010, 2:41 AM
Hi Nigel,

I don't have the progress bar well displayed.
I set no divisor nor dividend as my value is the progress status. So I thought I had to set the divisor to 100 but with no success.

Any idea?

I did that to solve my issue :


if (this.dividend) {
fraction = record.get(this.dividend) / value;
} else if (this.divisor) {
fraction = value / record.get(this.divisor);
}

else{
fraction = value /100;
}

Animal
24 Feb 2010, 6:55 AM
You can just configure it with your own getFraction method.

chriss
25 Feb 2010, 1:02 AM
I think it would be cooler if the progress bar would use some semi-transparent pgn as a background image( a black to white gradient with some transparency in it ) and a color for background-color. This way you'll have the possibility to choose any color you want for you progress bar, and not stick just to the ones you have a image for. What do you think?

Animal
25 Feb 2010, 6:31 AM
Well, that's entirely a matter for your own stylesheet.

Class names are added, do with them what you will.

Fabyo
11 Mar 2010, 4:16 AM
Ext.grid.EditorGridPanel

In the editor how to implement the use Ext.Slider ?


new Ext.ux.ProgressColumn({
header: '% Change',
width: 105,
dataIndex: 'change',
divisor: 'price',
align: 'center',
editor: new Ext.Slider({
width: 150,
increment: 5,
keyIncrement: 5,
value: 11,
minValue: 0,
maxValue: 100
})
})

Error:
this.field.reset is not a function
chrome://firebug/content/blank.gifExt.DomHelper=function(){var s=null,j=...remoting=Ext.direct.RemotingProvider;

:-/

Animal
11 Mar 2010, 6:57 AM
Slider is not a Field. Is it? read its inheritance.

Fabyo
11 Mar 2010, 9:34 AM
not

how to work with editing slider?

Animal
12 Mar 2010, 3:00 AM
You might try the new SliderField from the 3.2 beta.

Fabyo
12 Mar 2010, 3:42 AM
Thanks

wki01
24 Mar 2010, 9:14 AM
It would be nice to have such a thing as an extension of DisplayField.
Anyone?

Thanks in advance

Animal
24 Mar 2010, 10:57 AM
I don't know what you mean. What has a DisplayField got to do with a column renderer?

supercharge2
24 Mar 2010, 11:03 AM
Thank you animal for this useful extension. This really spiced up a page my sales team uses to track their sales progress. Now at a glance they can see where they are at which saves time and money. I appreciate your contributions!

Fabyo
24 Mar 2010, 11:42 AM
I don't know what you mean. What has a DisplayField got to do with a column renderer?

I find it interesting to use the SliderField in edit mode

wki01
25 Mar 2010, 12:15 AM
I don't know what you mean. What has a DisplayField got to do with a column renderer?

I was looking for a field that can display the value of a share (%) in graphic mode

Animal
25 Mar 2010, 12:22 AM
http://www.extjs.com/deploy/dev/docs/?class=Ext.ProgressBar

antmangaka
30 Mar 2010, 7:16 PM
hi first of all great plugin and thank you for posting it.

I tried registering the component like this


Ext.reg('pcolumn',Ext.ux.ProgressColumn);then tried to use it like:


var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{xtype:'pcolumn',header: '% Change',width: 105,dataIndex: 'change',divisor: 'price',align: 'center'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
But it doesn't work, the grid isn't being displayed

b is not a constructor
chrome://firebug/content/blank.gifvar swfobject=function(){var E="undefi...);Ext.grid.GroupingView.GROUP_ID=1000;ext-all.js


Update: searching the forums i saw

Ext.apply(Ext.grid.Column.types, {
pcolumn: Ext.ux.ProgressColumn
});
that did it :D

mohan_b
1 May 2010, 5:21 AM
Hi Animal,

Thank you very much for this great plugin.

I can vouch and verify that this plugin can be used with Livegrid without a hitch, if someone faces an issue, let me know.

Btw, can this plugin be ported as a column for TreeGrid(which is inherited from a TreePanel)?
If yes, please let me know how do I go about doing it, I will post the code here for others to use.

Thanks once again
Mohan_b

Boxcopter
2 May 2010, 11:44 AM
Thanks Animal this is exactly what I need!

Works like charm!

wemerson.januario
17 May 2010, 7:04 PM
very nice work

gijo,mk
18 May 2010, 4:09 AM
When i am using this progress column, i am getting two js error and not displaying any progress bar

1)Error: sp is undefined
Source File: file:///root/ext-2.2.1/adapter/ext/ext-base.js

2)Error: Ext.data.ArrayStore is not a constructor
Source File: file:///root/ext-2.2.1/examples/grid/Test.html

when i change ArrayStore to SimpleStore 2nd error comes as

Error: Ext.ux.ProgressColumn is not a constructor
Source File: file:///root/ext-2.2.1/examples/grid/Test.html

Test.html contains the above code
pls help me

Boxcopter
18 May 2010, 5:19 AM
When i am using this progress column, i am getting two js error and not displaying any progress bar

1)Error: sp is undefined
Source File: file:///root/ext-2.2.1/adapter/ext/ext-base.js

2)Error: Ext.data.ArrayStore is not a constructor
Source File: file:///root/ext-2.2.1/examples/grid/Test.html

when i change ArrayStore to SimpleStore 2nd error comes as

Error: Ext.ux.ProgressColumn is not a constructor
Source File: file:///root/ext-2.2.1/examples/grid/Test.html

Test.html contains the above code
pls help me
Use ext-all-debug.js and also, when you get a "is not a constructor" error, it is when you are using a wrong xtype usually. Do that. sp is undefined is a little vague, but usually when you try to reference something before you actually render it to the page.

Please post code instead of filenames. It doesn't help.

jay@moduscreate.com
18 May 2010, 5:23 AM
When i am using this progress column, i am getting two js error and not displaying any progress bar

1)Error: sp is undefined
Source File: file:///root/ext-2.2.1/adapter/ext/ext-base.js

2)Error: Ext.data.ArrayStore is not a constructor
Source File: file:///root/ext-2.2.1/examples/grid/Test.html

when i change ArrayStore to SimpleStore 2nd error comes as

Error: Ext.ux.ProgressColumn is not a constructor
Source File: file:///root/ext-2.2.1/examples/grid/Test.html

Test.html contains the above code
pls help me

Why are you developing without a web server?

gijo,mk
19 May 2010, 3:45 AM
I have put this in apache server.
Also I have moved the ProgressColumn.js to Test.html and the Error: Ext.ux.ProgressColumn is not a constructor has gone

But still following error is happening
Error: sp is undefined
Source File: http://192.168.1.106/ext-2.2.1/adapter/ext/ext-base.js

is there any difference b/w running extjs using a server or without a server?



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Progress Column Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ProgressColumn.css" />

<!-- overrides to base library -->

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<style type=text/css>
.x-grid3-td-progress-cell .x-grid3-cell-inner {
font-weight: bold;
}

.x-grid3-td-progress-cell .high {
background: transparent url(images/progress-bg-red.gif) 0 -33px;
}

.x-grid3-td-progress-cell .medium {
background: transparent url(images/progress-bg-orange.gif) 0 -33px;
}

.x-grid3-td-progress-cell .low {
background: transparent url(images/progress-bg-green.gif) 0 -33px;
}

.x-grid3-td-progress-cell .ux-progress-cell-foreground {
color: #fff;
}
</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!-- overrides to base library -->


<!-- page specific -->
<script type="text/javascript">



Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, {
/**
* @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to 'left'.
*/
/**
* @cfg {String} divisor Optional. The name of a Field by which to divide this column's value to yield the proportional width of the filled bar.
*/
/**
* @cfg {String} dividend Optional. The name of a Field to divide by this column's value to yield the proportional width of the filled bar.
*/

tpl: new Ext.XTemplate(
'<tpl if="align == \'left\'">',
'<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-background">',
'<div>{value}</div>',
'</div>',
'<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-foreground {cls}" style="width:{pct}%" ext:qtip="{qtip}">',
'<div ext:qtip="{qtip}">{value}</div>',
'</div>',
'</tpl>',
'<tpl if="align != \'left\'">',
'<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-foreground {cls}" ext:qtip="{qtip}">',
'<div ext:qtip="{qtip}">{value}</div>',
'</div>',
'<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-background" style="left:{pct}%">',
'<div style="left:-{pct}%">{value}</div>',
'</div>',
'</tpl>'
),

constructor: function(config) {
if (config.renderer) {
this.baseRenderer = config.renderer;
config = Ext.apply({}, config);
delete config.renderer;
}
Ext.grid.Column.call(this, config);
this.renderer = Ext.ux.ProgressColumn.prototype.renderer.createDelegate(this);
},

/**
* This function returns a class name to add to the filled section of the bar which may then be used
* to provide different appearances depending upon the fraction the cell represents. The default
* implementation which may be overridden returns:<ul>
* <li>'high' if fraction > 0.98</li>
* <li>'medium' if fraction > 0.75</li>
* <li>'low' otherwise</li>
* </ul>
* @param {Number} fraction The fraction represented by this Column.
*/
getBarClass: function(fraction) {
return (fraction > 0.98) ? 'high' : (fraction > 0.75) ? 'medium' : 'low';
},

/**
* <p>This function returns the proportion to render as the filled section of the bar as a floating
* point value between zero and one.</p>
* <p>The provided implementation either divides this Column's value by a configured {@link @divisor}
* or divides a configured {@dividend} by this Column's value. A custom implementation may be injected
* as a configuration option.</p>
* This function is called with the following parameters:<ul>
* <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
* <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
* <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
* <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
* (e.g. 'style="color:red;"').</p></li></ul></p></li>
* <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li>
* <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
* <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
* <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li></ul>
* @return {Number} The fraction represented by this Column.
*/
getFraction: function(value, meta, record, rowIndex, colIndex, store) {
var fraction = 0;
if (record) {
if (this.dividend) {
fraction = record.get(this.dividend) / value;
} else if (this.divisor) {
fraction = value / record.get(this.divisor);
}
if (fraction < 0) {
fraction = 0;
} else if (fraction > 1) {
fraction = 1;
}
}
return fraction;
},

/**
* <p>This function returns a string to use as the tooltip when hovering over the filled bar.</p>
* <p>The provided implementation displays the proportion as a percentage value rounded to two decimal places.
* A custom implementation may be injected as a configuration option.</p>
* This function is called with the following parameters:<ul>
* <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
* <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
* <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
* <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
* (e.g. 'style="color:red;"').</p></li></ul></p></li>
* <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li>
* <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
* <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
* <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li></ul>
* <li><b>pct</b> : Number<p class="sub-desc">The calculated percentage.</p></li></ul>
* @return {String} The message to display as a tooltip when hovering over the filled bar.
*/
getQtip: function(value, meta, record, rowIndex, colIndex, store, pct) {
return Ext.util.Format.number(pct, "0.00%");
},

// private
baseRenderer: function(v) {
return v;
},

// private
renderer: function(value, meta, record, rowIndex, colIndex, store) {
var fraction = this.getFraction.apply(this, arguments),
pct = fraction * 100,
displayVal;

Array.prototype.push.call(arguments, pct);
displayVal = this.baseRenderer.apply(this, arguments);
if (record) {
meta.css += ' x-grid3-td-progress-cell';
return this.tpl.apply({
align: this.align || 'left',
value: displayVal,
pct: fraction * 100,
qtip: this.getQtip.apply(this, arguments),
cls: this.getBarClass(fraction)
});
} else {
return displayVal;
}
}
});




Ext.onReady(function(){

Ext.QuickTips.init();

// sample static data for the store
var myData = [
['3m Co',71.72,70.64,'9/1 12:00am'],
['Alcoa Inc',29.01,24.5,'9/1 12:00am'],
['Altria Group Inc',83.81,42.1,'9/1 12:00am']
];

/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
new Ext.ux.ProgressColumn({
header: '% Change',
width: 105,
dataIndex: 'change',
divisor: 'price',
align: 'center',
renderer: function(value, meta, record, rowIndex, colIndex, store, pct) {
return Ext.util.Format.number(pct, "0.00%");
}
}),
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>
</head>
<body>
<h1>Progress Column Grid Example</h1>
<div id="grid-example"></div>
</body>

Animal
19 May 2010, 6:08 AM
What debugging have you done? Any at all?

ext-all AND ext-all-debug???????

gijo,mk
19 May 2010, 6:29 AM
Hi

Sorry for that..
But the error doesn't have anything to do with ext-all.js, right?

For me, even the following code with
Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, { });
alone in the header gives the same error

Error: sp is undefined
Source File: http://192.168.1.106/ext-2.2.1/adapter/ext/ext-base.js
Line: 9

what could be the problem??




<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Progress Column Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ProgressColumn.css" />

<!-- overrides to base library -->

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<style type=text/css>
.x-grid3-td-progress-cell .x-grid3-cell-inner {
font-weight: bold;
}

.x-grid3-td-progress-cell .high {
background: transparent url(images/progress-bg-red.gif) 0 -33px;
}

.x-grid3-td-progress-cell .medium {
background: transparent url(images/progress-bg-orange.gif) 0 -33px;
}

.x-grid3-td-progress-cell .low {
background: transparent url(images/progress-bg-green.gif) 0 -33px;
}

.x-grid3-td-progress-cell .ux-progress-cell-foreground {
color: #fff;
}
</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->

<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!-- overrides to base library -->


<!-- page specific -->
<script type="text/javascript">

Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, {

});

</script>
</head>
<body>
<h1>Progress Column Grid Example</h1>
<div id="grid-example"></div>
</body>



thanks..

Animal
19 May 2010, 11:37 PM
And?

Is this how you create apps?

See an error, throw your hands up and get "teh interwebs" to do your debugging?

Again, what debugging have you done?

jay@moduscreate.com
20 May 2010, 1:12 AM
And?

Is this how you create apps?

See an error, throw your hands up and get "teh interwebs" to do your debugging?

Again, what debugging have you done?

What Nigel is alluding to is the fact that Ext.grid.Column does *not exist* in Ext JS 2.x.

gijo,mk
20 May 2010, 1:36 AM
hi

sorry for putting this up in the forum.
but i don't know how to proceed.
i am a beginner in javascript and completely new to ext-js.

in my error console i can see the error is in ext-base.js line9.
but the file is not easily readable.

i am getting the error, even after i reduced my code to
Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, { });

how can i proceed debugging from here?

thanks

Condor
20 May 2010, 1:49 AM
Use ext-base-debug.js and ext-all-debug.js for debugging!

jay@moduscreate.com
20 May 2010, 2:55 AM
What Nigel is alluding to is the fact that Ext.grid.Column does *not exist* in Ext JS 2.x.

http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-point-up-2.jpg

Besessener
29 Jul 2010, 8:34 AM
For my use i added a new attribute:

/**
* @cfg {boolean} invertedColor if timespan is used
*/
invertedColor : falseand changed the colored-part to this:

if (this.colored == true) {
if(this.invertedColor == true) {
if (v > 66)
style = '-red';
if (v < 67 && v > 33)
style = '-orange';
if (v < 34)
style = '-green';
}
else {
if (v <= 100 && v > 66)
style = '-green';
if (v < 67 && v > 33)
style = '-orange';
if (v < 34)
style = '-red';
}
}So it demonstrates better the time that approachs.
i.e. 99% of the time between now and endtime of a project is critical -> red !

talha06
23 Feb 2011, 12:43 AM
great extension indeed.. Thank u so much Animal.. I just want to ask is it compatible with Grouping Grid? I tried to use, but I wasn't able to see any changes in the cell?
I'll be happy if someone helps me..
Thanks in advance..

cyberal
31 Oct 2011, 1:29 AM
Hi,

Thank you for this good extension.

In my project I need to choose the color of the progress bar in function of an other column, to do this I have changed the initial code, it seems to me to be good to integrate this update in the original version:
My little modifications are in bold.


getBarClass: function(fraction, value, meta, record, rowIndex, colIndex, store) {
return (fraction > 0.98) ? 'high' : (fraction > 0.75) ? 'medium' : 'low';
}

// private
renderer: function(value, meta, record, rowIndex, colIndex, store) {
var fraction = this.getFraction.apply(this, arguments),
pct = fraction * 100,
displayVal;


Array.prototype.push.call(arguments, pct);
displayVal = this.baseRenderer.apply(this, arguments);
if (record) {
meta.css += ' x-grid3-td-progress-cell';
return this.tpl.apply({
align: this.align || 'left',
value: displayVal,
pct: fraction * 100,
qtip: this.getQtip.apply(this, arguments),
cls: this.getBarClass(fraction, value, meta, record, rowIndex, colIndex, store)
});
} else {
return displayVal;
}
}


Bye and again thank you for this plugin ;)
Cyberal

fvchapa
17 May 2012, 7:25 AM
Hi!...this is error when integrate whit grouping and summay

p is null

line 148

display bar good in grid but not in summary row.

Any suguestions?

sorry my bad inglish.

yuiman
16 Jun 2012, 6:22 PM
Anyone have this plugin working with 4.1.0?

- Joe