Geek Answers Handbook

Extjs 3 - add progress indicator and image in the property grid

Is it possible to implement progress in the property grid in extjs 3? How to add an image to the property grid?

I have a percentage value, and I want to represent it in a progressbar (its uneditable).

Thank you for help.

+4
source share
2 answers

You can try something like this:

//==== Progress bar 1 ==== var pbar1 = new Ext.ProgressBar({ id:'pbar1', width:300 }); var grid = new Ext.grid.PropertyGrid({ title: 'Properties Grid', autoHeight: true, width: 300, renderTo: 'grid-ct', bbar: pbar1, //You can set the progress bar as the property girds bottom toolbar. customRenderers: { Available: function(v){ return '<img src="path to image" />'; } }, //This would render the image into the Available property. source: { "(name)": "My Object", "Created": new Date(Date.parse('10/15/2006')), "Available": false, "Version": .01, "Description": "A test object" } });

When using customRenderers to render an image
The name of the renderer type should correspond with the name of the property that it will render For more information see the API .

+3
source

This is the first thing I am talking about. But it is still not so user friendly that it renders progressbars after rendering the grid.

This is a custom renderer for the progress column:

 renderer: function( value, metaData, record, rowIndex, colIndex, store ) { var id = Ext.id(); (function(){ var progress = new Ext.ProgressBar({ renderTo: id, value: progress_value }); }).defer(25); return '<div id="'+ id + '"></div>'; }

It displays the <div id="generated-id"/> , and then creates the generated progress bar in this div .

It would be better to use some kind of closure to create the progressbar only once and return it html through its own rendering, as in the example above, but, unfortunately, I still do not know how to do this in Ext.js 3. Regarding Ext. js 4, you can see this topic on the sencha forum

0
source

More articles:


All Articles