web-dev-qa-db-ja.com

extjsでボタンのアイコンサイズを正しく設定するにはどうすればよいですか？

私はextjs4を使用していて、私がやろうとしていることは単純なようですが、それに対する実用的な解決策を見つけることができません。

私は64 * 64pxのアイコンを持っていて、ボタンにそれを背景画像として表示したいのですが、extjsは画像のみを表示しますpartially =。ネット上で解決策をグーグルで検索しましたが、誰もworking解決策を提案しませんでした。背景画像を合わせたいだけです。私のボタンに。

これが私のjsコードです：

{
    xtype : 'button',
    text : null,
    iconCls : 'startbutton',
    //icon:'./assets/icons/startbtn.png',
    //style:{height:'60px'},
    width : 64,
    height : 64
}

これが私のCSSコードです：

.x-btn-icon .startbutton {
    background-image: url(start.png) !important;
}

私はいくつかのcssの組み合わせを試しましたが、それでも成功しませんでした。

javascriptcssextjsextjs4
15
Mehdi Fanai

IconClsは厳密にボタンのアイコンを指します。画像でボタン全体をカバーする場合は、ボタンに追加されたcssクラスに背景を追加する必要があります。

{
    xtype: 'button',
    width: 64,
    height: 64,
    text: 'some text',
    cls: 'startbutton'
}

とcss

.startbutton {
    background-image: url(start.png) !important;
}
10
nscrob

受け入れられた答えに重要な問題がありました。ボタンのテキスト（下の画像の左ボタン）が間違った位置（アイコンの後ろ）に表示されました。これは、デフォルトのスケールを使用するように構成された位置です。

enter image description here

デフォルト以外のアイコンサイズを使用し、テキストを正しい位置に配置するために、私の解決策はかなり単純でしたなしコアスタイルをオーバーライドします。

textプロパティをhtmlプロパティに置き換えました。次に、目的のボタンテキストを「スパン」内に配置し、CSSで正しく配置するために、このスパンにクラスを追加しました。

これはコードです（IE、Firefox、Chromeでテスト済み）：

ボタンの定義

xtype:'button',
iconCls:'contactIcon80',
iconAlign:'top',
width:120,
height:100,
html:'<span class="bigBtn">Damn you hayate</span>'

ボタンiconCls

.contactIcon80 {
    background-image: url(../images/calendar80.png) !important;
    width:80px!important;
    height:80px!important;
    margin-right: auto !important;
    margin-left: auto !important;
}

スパンクラス

.bigBtn {
    position: absolute;
    bottom: 4px  !important;
    left: 0%  !important;
    text-align: center !important;
    width: 120px !important;
}

もちろん、これはアイコン上部のテキスト下部用です。他のレイアウトに合わせてカスタマイズできます

4
Anestis Kivranoglou

画像の高さ/幅が64pxの場合、これは直接役に立ちませんが、次のconfig'scale 'オプションを使用してボタンのサイズを調整できます。

• 'small'-ボタン要素の高さが16pxになります。

•「中」-ボタン要素の高さが24pxになります。

• 'large'-ボタン要素の高さが32pxになります

3
dougajmcdonald

私はExtJS3.4.0を使用していますが、これが4.xで簡単かどうかはわかりませんが、そう願っています。

小/中/大以外の新しいボタンスタイルを作成し、ボタンを指定する際の問題を解決しました。

{ text: 'Read Data',
  scale: 'extra',
  iconAlign: 'left',
  iconCls:'read_icon'}

アイコンを使用する側ごとにCSSコードを指定する必要があります。私の場合は左側に定義したばかりですが、上部/下部/右側/左側ごとにクローンを作成する必要があります。 ext-all.css内にすべての元のコードがあります。これが、64x64アイコンに使用しているものです。

.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left:66px;
  height:64px;
}

プロジェクト内のすべての「余分な」サイズのボタンのコードを再利用でき、必要な数だけ追加できます

1
Valerio