extjs - 如何更改 Ext.ProgressBar 的高度

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/