В 3й версии Ext JS в демках появился новый пользовательский компонент Ext.ux.ProgressBarPager. Этот компонент отображает позицию в списке, просматриваемом постранично, при помощи полосы прогресса. Так же клик по компоненту обеспечивает прокрутку в нужное место. Однако данный компонент (как и многие новинки 3й версии) оказался не без "жуков", которые пришлось исправлять... При обычном исользовании на компонент никаких нареканий не было. Но вот стоило его поместить на грид, который рендерится в попап-окне, как сразу начались проблемы:

Как видите, здесь и сам прогресс бар, и тексты бесследно исчезли. HTML-инспектор Firebug'а показал мне, что исчезновение происходит в следствии непонятно откуда взявшимся CSS-свойствам height: 0px в div'ах контейнерак прогрессбара и текста.

Причину столь удивительного явления я так и не понял, так что поступил предельно просто - в событии после рендера я корректирую высоту данных элементов на правильную.

Корректировка файла

1. К свойству     progBarWidth  добавляем свойство     progBarHeight:

1
2
3

	progBarWidth   : 225,
 
	progBarHeight   : 18,

2. Определяем height при создании прогрессбара

1
2
3
4
5
6

			this.progressBar = new Ext.ProgressBar({
				text    : this.defaultText,
				width   : this.progBarWidth,
				height   : this.progBarHeight,
				animate :  this.defaultAnimCfg
			});

3. Добавляем обработчик события afterrender в котором коррктируем размеры отрендереных элементов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

			this.progressBar.on('render', function(pb) {
				pb.el.applyStyles('cursor:pointer');				
				pb.el.on('click', this.handleProgressBarClick, this);
			}, this);
 
			this.progressBar.on('afterrender', function(pb) {
				var div = Ext.DomQuery.selectNode('div[id='+pb.el.dom.id+'] div{height=0px}');
				if (div) {
				   div.style.height = pb.el.dom.style.height;
				   var textel = Ext.DomQuery.selectNode('div[id='+pb.el.dom.id+'] div[class=x-progress-bar]').children[0];
				   var textbackel = Ext.DomQuery.selectNode('div[id='+pb.el.dom.id+'] div[class=x-progress-text x-progress-text-back]');
				   textel.style.width = pb.el.dom.style.width;
				   textel.style.height = pb.el.dom.style.height;
				   textbackel.style.width = pb.el.dom.style.width;
				   textbackel.style.height = pb.el.dom.style.height;
				}
			}, this);

Готвый код компонента с испрвлениями можно скачать отсюда.

Метки: bugs, ext js, extjs, компоненты