PDA

View Full Version : Ext.grid.ProgressBarSelectionModel



Ximosoft
22 May 2008, 1:45 AM
Hi, due to work reasons i searched a plugin or component to show status like a progress bar , but I had no luck, so I decided to make one.It's based on CheckBoxSelectionModel.

Live Example:http://ximosoft.com/extjs/examples/grid/grid_progress.html

Usage:
Create a new var with header and dataIndex,
var sm = new xg.ProgressBarSelectionModel({header: "YourField", dataIndex:'dataIndexField'});
and add as a column

Css needed to show color-coded status:


.x-progress-bar-red {
background:#FF0000 url(../images/default/progress/progress-bg-red.gif) repeat-x scroll left center;
border-bottom:1px solid #7FA9E4;
border-right:1px solid #de7d6a;
border-top:1px solid #ecb7ad;
float:left;
height:18px;
}
.x-progress-bar-orange {
background:#9CBFEE url(../images/default/progress/progress-bg-orange.gif) repeat-x scroll left center;
border-bottom:1px solid #7FA9E4;
border-right:1px solid #deab7e;
border-top:1px solid #d7b290;
float:left;
height:18px;
}
.x-progress-bar-green {
background:#00FF00 url(../images/default/progress/progress-bg-green.gif) repeat-x scroll left center;
border-bottom:1px solid #7FA9E4;
border-right:1px solid #5bd976;
border-top:1px solid #79e18f;
float:left;
height:18px;
}

If you do not want to show color-coded bars, just erase [-'+style+'].
Suggestions accepted.

galdaka
22 May 2008, 2:03 AM
Live example please,

Thanks in advance,

Ximosoft
22 May 2008, 10:19 PM
Live example added

wm003
23 May 2008, 3:37 AM
Very nice! Thanks for sharing.:)

durlabh
23 May 2008, 7:02 AM
Thanks for sharing. I modified it slightly:


Ext.ns("Ext.ux.renderer");

Ext.ux.renderer.Progress = function(v, p, record, w){
var text_post = v + '%';
var style ='';
var colored = true;
if (colored == true)
{
if (v <= 100 && v >66) style='-green';
if (v < 67 && v >33) style='-orange';
if (v < 34 ) style='-red';
}
return String.format('<div class="x-progress-wrap"><div class="x-progress-inner"><div class="x-progress-bar{0}" style="width:{1}%;"><div class="x-progress-text x-progress-text-back">{2}</div><div class="x-progress-text x-progress-text-front">{2}</div></div></div></div>', style, v, text_post);
};



And now in my columnModel, I use it like:


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'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
{header: "Test", width: 100, sortable: true, renderer: Ext.ux.renderer.Progress, dataIndex: 'test'}
]


The main change I did was to use %age instead of "px" width. This way, I can have the column size as per my needs. The only thing I had to sacrifice is - text doesn't come in center. My modified CSS looks like this:



.x-progress-bar-red, .x-progress-bar-orange, .x-progress-bar-green
{
border-bottom:1px solid #7FA9E4;
float:left;
height:18px;
}
.x-progress-bar-red {
background:#FF0000 url(images/progress-bg-red.gif) repeat-x scroll left center;
border-right:1px solid #de7d6a;
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;
}
.x-progress-text-back
{
color:#000000;
text-align:center;
}
.x-progress-text-front
{
color:#ffffff;
text-align:center;
margin-top:1px;
margin-left:1px;
}

jelt
23 May 2008, 7:08 AM
Nice work, keep it up !

Is it normal that "completed" column doesn't appear in the column menu ?

durlabh
23 May 2008, 7:24 AM
That's one more reason I went ahead with writing a renderer. If you want, you can try the code I had posted in my previous post. Since it works as a regular column, it can be used for filtering etc. everything without any problems.

galdaka
23 May 2008, 9:37 AM
Hi,

Not work in IE6.

Works fine in FF2!!

Greetings,

Ximosoft
25 May 2008, 10:35 PM
Nice work, keep it up !

Is it normal that "completed" column doesn't appear in the column menu ?


New version changed, simply change fixed: true atributte to false, now you can use it as a normal column.



Hi,

Not work in IE6.

Works fine in FF2!!

Greetings,


I'll try to make it work on IE6.

I updated the code, now text it's centered. Suggestions acepted.

Foggy
26 May 2008, 7:00 AM
I really don't understand why you extend the grid.selectionModel for this?

Ximosoft
26 May 2008, 8:48 AM
I know there's no need to make an extension just for the renderer as durlabh pointed, you can simply use a renderer, but my first intention was to make an updatable progres bar, like a cue list, but i had no luck making it work, so until then I erase the updating part of the code (there's no need to put it until it work).

The idea is, if you don't have a dataIndex selected, use it as a normal progress bar. Any idea how to make it?
Suggestions are wellcome.

Fabyo
26 May 2008, 8:51 AM
I liked a lot of plug, but how do I edit it?
for example I add "ProgressBarSelectionModel + Slider," when I click and edit the slider appear

http://extjs.com/deploy/dev/examples/slider/slider.html

example :"Slider with custom tip" for Ext.grid.EditorGridPanel

http://galutti.com.br/progreessbar.JPG

someone could help do that?

thanks

Ximosoft
26 May 2008, 9:48 AM
I think you have to use the slider render to make it render in a grid space, as the progress bar does, just open slider.js and analize what elements are used in and recreate them in a renderer function, once you have this, you must put the render in progress bar renderer (toggle between bar / slider), and add the extra funcionality to interact with the progress bar.

Hope i help you

Fabyo
26 May 2008, 10:02 AM
But not working
I swapped new xg.GridPanel by xg.EditorGridPanel

I give 2 clicks and nothing happens, neither of error

Fabyo
27 May 2008, 5:22 AM
I think you have to use the slider render to make it render in a grid space, as the progress bar does, just open slider.js and analize what elements are used in and recreate them in a renderer function, once you have this, you must put the render in progress bar renderer (toggle between bar / slider), and add the extra funcionality to interact with the progress bar.

Hope i help you

There must be exactly the Slider, the important thing is that I can edit the Progressbar, may even be a combobox
thank you if you can help

Foggy
27 May 2008, 6:55 AM
The idea is, if you don't have a dataIndex selected, use it as a normal progress bar. Any idea how to make it?
Suggestions are wellcome.
First and simplest solution would be to implement this as renderer.
If you need any more functionality in it, i would use a plugin like Jack's CompleteColumn from the tasks example...

Fabyo
29 May 2008, 3:12 AM
Does anyone could help? Because this plugin does not have the option to edit, which would add EditorGridPanel


Ext.grid.ProgressBarSelectionEditorGridPanel = Ext.extend (Ext.grid.EditorGridPanel, ( is certain is this?

KRavEN
6 Jun 2008, 9:10 AM
I turned this into a grid plugin that supports editing.

http://extjs.com/forum/showthread.php?t=37787

whoopywhale
31 Dec 2008, 3:25 AM
The XML gives the values as a string of length of 3. How can I display this in proper format?
I want to display it as 0% instead of 000%.
Please help.

xhb876
21 Jan 2009, 6:20 PM
:)

aful
24 Jun 2011, 12:40 AM
I want to change the height of progress bar, when i add the value of height ,but it fail.