2

私は単純Ext.ProgressBarで、高さを2倍にする必要がありますが、進行状況の画像を拡大縮小せず、外側のボックスだけです。小さすぎて拡大縮小できないかもしれませんが、高さは 800px を超えています (sencha の元の画像)。

では、これを行うにはどうすればよいでしょうか。

ここに設定があります

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

1 に答える 1

3

プログレスバーの高さはスタイル定義で設定されます。.x-progress-barcssクラスを変更することで高さを変更できます。height最新のブラウザ（Chromeなど）では、背景画像がグラデーションとして定義されているため、プロパティを変更するだけで済みます。例：

// 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/

もう1つの方法は、実際にスケーリングされていない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/

于 2012-12-11T18:25:59.403 に答える