2

I have a simple Ext.ProgressBar and need to double it's height which works but didn't scale the progress image, just the outer box. I thought OK, maybee it is to small and can't scale but it has a height of >800px (sencha original images).

So how can this be done?

Here's the config

{
    xtype: 'progressbar',
    text: 'Some text',
    border: 1,
    height: 40
}
seba
  • 974
  • 2
  • 10
  • 30
  • How are you currently doubling the height? sounds like you might have just hit the wrong dom element – dougajmcdonald Dec 11 '12 at 12:08
  • @dougajmcdonald See my edit. I also looked at the DOM and found out that there are two overlaping elements. But I thought ExtJS manages the height and not that I need to manipulate on the DOM... – seba Dec 11 '12 at 12:26

1 Answers1

3

Height of progress bar is set in style definition. You can change height by changing .x-progress-bar css class. In modern browsers (eg. Chrome) all you need to do is to change height property, because background image is definied as gradient. Example:

// height of bar
.x-progress-bar {
    height: 38px;
}
// height of text box
.x-progress-text {
    height: 38px;
    line-height: 38px;
}

Working sample: http://jsfiddle.net/D2QYN/2/

Another way is to attach handler to render event and set height of child elements which are not scaled verically. Example handler:

listeners: {
    render: function(sender) {
        var height = sender.bar.parent().getHeight(true); // content height
        sender.bar.setStyle('height', height + 'px');
        sender.textEl.setStyle('height', height + 'px');
        sender.textEl.setStyle('line-height', height + 'px');
    }
}

Working sample: http://jsfiddle.net/D2QYN/3/

Krzysztof
  • 15,900
  • 2
  • 46
  • 76