Question

我有一个简单的Ext.ProgressBar并且需要加倍它的高度才有效，但没有缩放进度图像，只是外框。我认为好吧，也许它是小的，不能缩放，但它的高度> 800px（sencha原始图像）。

那怎么办呢？

这是配置

{
    xtype: 'progressbar',
    text: 'Some text',
    border: 1,
    height: 40
}

Answer 1

进度条的高度在样式定义中设置。您可以通过更改.x-progress-bar css类来更改高度。在现代浏览器（例如Chrome）中，您需要做的就是更改height属性，因为背景图像被定义为渐变。例如：

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

工作样本：http://jsfiddle.net/D2QYN/2/

另一种方法是将处理程序附加到render事件并设置未正确缩放的子元素的height。示例处理程序：

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

工作样本：http://jsfiddle.net/D2QYN/3/

如何更改Ext.ProgressBar的高度

1 个答案: