extjs 3 - add progressbar and image in property grid

Question

Is it possible to implement progressbar in property grid in extjs 3? How do I add an image in property grid?

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

Thanks a lot for help.

Answer 1

You could 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 the image
The name of the renderer type should correspond with the name of the property that it will render For more see the API.