extjs - extjs 3 - 在属性网格中添加进度条和图像

Question

是否可以在 extjs 3 的属性网格中实现进度条？如何在属性网格中添加图像？

我有一个百分比值，我想在进度条中表示它（它不可编辑）。

非常感谢您的帮助。

Answer 1

你可以尝试这样的事情：

//==== 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"
  }
});

使用 customRenderers 渲染图像时
The name of the renderer type should correspond with the name of the property that it will render，更多信息请参见API。

Answer 2

这是我想到的第一件事。但它仍然不是那么用户友好，因为它在渲染网格后渲染进度条。

这是您的进度列的自定义渲染器：

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>';
            }

它渲染<div id="generated-id"/>然后将生成的进度条渲染到 thisdiv中。

最好使用某种闭包只创建一次进度条并通过自定义渲染器返回它的 html，如上面的示例所示，但不幸的是我还不知道如何在 Ext.js 3 中做到这一点。至于 Ext .js 4 你可以在sencha 论坛上看到这个帖子