1

TabPanelにカスタムアイコンを追加しようとしていますが、追加すると、角が丸い暗いボックスが表示されます。

私のCSSは次のようになります：http：//pastebin.org/447682

URLのコードは、Webで見つけたランダムなRSSアイコンのbase64です。また、画像に相対URLを追加しようとしましたが、成功しませんでした。

ext-touch.cssファイル（http://pastebin.org/447685）からbase64を使用するようにコードを変更すると、すべて正常に機能するのに、なぜ「カスタム」アイコンを受け入れないのでしょうか。

注：RSSアイコンは必要ありません。テスト目的で試してみました。

4

3 に答える 3

3

MrSoundless — Sencha Touch のテーマエンジンに取り組みました。問題は、下部のタブが従来の背景画像ではなく、アイコンに WebKit マスクを使用していることです。これにより、渡されたアイコンの形状を塗りつぶすことができるため、選択時にその色を動的に変更できます。そこに従来のイメージを表示するには、background-image代わりに を使用し-webkit-mask-box-imageます。あなたがそうであるようにBase64エンコーディングはまだうまくいくはずです。

于 2010-08-07T18:41:00.433 に答える
0

この質問は 2010 年に出されたものですが、解決策を探しているときにまだ出てきました。この機能は Sencha 2.0 で変更されたようで、私はそれと戦うのにしばらく費やしたので、2.0 互換性のために必要なものは次のとおりです:

CSS/インライン スタイルシート

.x-tab .x-button-icon.XXXXX,
.x-button .x-button-icon.x-icon-mask.XXXXX {
  -webkit-mask-image: url('/img/1.png');
}

App.js タブ パネルの定義

{
    title: 'Your tab title',
    iconCls: 'XXXXX'
}

XXXXX はカスタム アイコンの名前です。

それが役立つことを願っています。

于 2012-03-08T20:18:25.840 に答える
0

たとえば、.html ファイルで

 .image{
-webkit-mask-box-image: url('/public/images/btn.png');
}

上記で定義した画像を tabPanel で使用します

iconCls: 'image',
于 2012-02-27T11:30:30.563 に答える