extjs 3 - добавить индикатор и изображение в сетку свойств - PullRequest
Новая
       21

extjs 3 - добавить индикатор и изображение в сетку свойств

4 голосов
/ 12 мая 2011

Возможно ли реализовать прогрессбар в сетке свойств в extjs 3? Как добавить изображение в сетку свойств?

У меня есть значение в процентах, и я хочу представить его в прогрессбар (его нельзя редактировать).

Большое спасибо за помощь.

Ответы [ 2 ]

3 голосов
/ 12 мая 2011

Вы можете попробовать что-то вроде этого: 

//==== 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 .

0 голосов
/ 17 декабря 2012

Это первое, о чем я думаю. Но это все же не так удобно для пользователя, как рендеринг индикаторов прогресса после рендеринга сетки.

Это пользовательский рендер для вашего столбца прогресса: 

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"/>, а затем рендеринг сгенерированного индикатора прогресса в этот div.

Было бы лучше использовать какое-то закрытие, чтобы создать индикатор прогресса только один раз и возвратить его в формате HTML через пользовательский рендер, как в примере выше, но, к сожалению, я пока не знаю, как это сделать в Ext.js 3. Что касается Ext.js 4, вы можете увидеть эту тему на форуме sencha

...