CODEWITHSUNDEEP
extjsprogress-barextjs3propertygrid
user427969
user427969

Reputation: 3896

extjs 3 - add progressbar and image in property grid

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.

Upvotes: 4

Views: 2937

Answers (2)

sepulchered
sepulchered

Reputation: 814

This is the first thing I though about. But it's still not so user friendly as it's render progressbars after grid is rendered.

This is custom renderer for your 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 renders <div id="generated-id"/> and then renders generated progressbar into this div.

It would be better to use some kind of closure to create progressbar only once and to return it's html via custom renderer as in the example above, but unfortunately I don't know yet how to do it in Ext.js 3. As for Ext.js 4 you can see this thread at sencha forum

Upvotes: 0

shane87
shane87

Reputation: 3120

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.

Upvotes: 3

Related Questions