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

Question

我有一个简单的Ext.ProgressBar，需要加倍它的高度，它可以工作但没有缩放进度图像，只是外框。我想好吧，也许它很小并且无法缩放，但它的高度> 800px（sencha原始图像）。

那么如何做到这一点呢？

这是配置

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

Answer 1

进度条的高度在样式定义中设置。您可以通过更改.x-progress-barcss 类来更改高度。在现代浏览器（例如 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/