TabPanel のカスタム アイコンが失敗する

StackOverflow https://stackoverflow.com/questions/3408231

質問

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

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

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

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

注記：RSSアイコンは要りません。テスト目的で試しただけです。

役に立ちましたか？

解決

MrSoundless - 私は煎茶タッチでテーマエンジンに取り組みました。問題は、下のタブがアイコンではなく、伝統的な背景画像のためのWebKitのマスクを使用することです。これは、私たちはの形状を埋めることができます。の我々は、動的選択にその色を変更することができますので、あなたが、合格アイコンの。そこに、使用background-imageの代わり-webkit-mask-box-imageで伝統的な画像を取得します。 Base64では、あなたはまだ問題ないはずですとしてエンコードます。

他のヒント

あなたの.htmlファイルに例えば

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

とあなたのtabpanel

で上記で定義された画像を使用します 
iconCls: 'image',

この質問は 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 はカスタム アイコンの名前です。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top