Sencha Touch 2：パネルによるバックグラウンドCSSの変更

Question

多分私は何かが不足しているかもしれませんが、基本モデルとしてGetting Startedテンプレートを使用している場合、Sencha Touchのバグのように見えます。

Main.js（TitleBarを含む）は、他のパネルがMain.jsの子であり、TitleBarがあるため子が親の背景色を設定できないため、他のすべてのパネルを呼び出します。この場合、画面の下部にあるナビゲーションバー（TitleBar）を使用して、Home.jsページから子ページに色を変更することはできません。誰かがこれに対する回避策を見つけましたか？

<div class="Sencha-App"> 
    <div class="Panel"></div> 
    <div class="TitleBar"> </div> 
</div> 

タイトルバーはパネルの子だったが、それはあなたの煎茶アプリの唯一の子であるため、CSSとのタイトルバーを動的にする方法がないかの場合、問題は簡単に解決されるだろう。これは、私が行うことができる唯一のことは、 "myPanel"に等しいクラスがあるかどうかを調べるためにJavaScriptを使用することです、もしそうならTitleBarの背景を何らかの色に設定しますか？または、Getting Startedチュートリアルで使用しているアーキテクチャー以外のアーキテクチャーを使用してください。

Answer 1

が、これはあなたが.scssファイル であなたの特定のUIを作成した.cssファイルに変更が反映されますどのコンパスを使ってコンパイルすることができ、ツールバーの色/スタイルを変更するには
......あなたを助けることができるかもしれませ 次に、このUIをツールバーに設定してください。

$ base-color：＃279806;
$ base-gradient： 'gloss';
$ base-active：＃279806;
@include sencha-tabbar-ui（ 'TabUI'、$ base-color、$ base-gradient、$ base-active）;

var tabPanel = new Ext.TabPanel（{ ui： 'TabUI' }）;