Sencha Touch 2 : 배경 CSS가 패널별로 변경됩니다.

Question

아마도 누락되었지만 Sencha Touch의 버그처럼 보입니다. 기본 모델로 Getting Started 템플릿을 사용하는 경우 TitleBar를 특정 패널로 타겟팅 할 수 없습니다. .

Main.js (TitleBar 포함)는 다른 패널이 TitleBar 인 Main.js의 하위이므로 자식이 부모의 배경색을 설정할 수 없기 때문에 다른 모든 패널을 호출합니다. 이 경우 화면 아래쪽에있는 탐색 모음 (TitleBar)을 사용하여 Home.js 페이지에서 하위 페이지로 색상을 변경하려면 불가능합니다. 이 문제에 대한 해결 방법을 찾은 사람이 있습니까?

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

문제는 쉽게 제목 표시 줄은 패널의 아이 일 경우 경우 해결하지만, 그것은 단지 당신의 엽차 - 응용 프로그램의 자식이기 때문에 CSS와 제목 표시 줄 동적으로 만들 수있는 방법이 없습니다 것입니다. 이것은 내가 할 수있는 유일한 일은 "myPanel"과 같은 클래스가 있는지 찾기 위해 자바 스크립트를 사용하고, 그렇다면 TitleBar의 배경을 어떤 색으로 설정하는 것입니까? 또는 시작하기 자습서에서 사용하는 것 이외의 일부 아키텍처를 사용합니까?

Answer 1

이 당신이 ......
당신이 .scss 파일 에서 특정 UI를 만들고 .css 파일의 변경 사항을 반영 할 나침반을 사용하여 컴파일 할 수 있습니다 색상/도구 모음의 스타일을 변경하는 데 도움이 될 수 있습니다 그런 다음이 UI를 툴바에 설정하십시오.

$ base-color : # 279806;
$ 기본 그라데이션 : '광택';
$ base-active : # 279806;
@include sencha-tabbar-ui ('TabUI', $ base-color, $ base-gradient, $ base-active);

var tabPanel = new Ext.TabPanel ({ ui : 'TabUI' });