Question

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
}

Answer 1

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/