뷰포트 Sencha Touch로 조건부 툴바 적용

Question

Imench와 함께 MVC 경로로갑니다.

/** 
* @author Jeff Blake 
*/ 
Ext.regApplication('App', { 
defaultTarget: 'viewport', 
defaultUrl : 'Viewport/index', 
name   : 'App', 
icon   : "mobile/public/resources/images/icon.png", 
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png", 
//useHistory : false, 
//useLoadMask : true, 

launch: function() { 
    Ext.Viewport.init(); 
    Ext.Viewport.onOrientationChange(); 

    this.viewport = new App.Viewport({ 
     application: this 
    }); 

    Ext.dispatch({ 
     controller: 'User', 
     action : 'index' 
    }); 
} 
}); 

/** 
* @class App.Viewport 
* @extends Ext.Panel 
* This is a default generated class which would usually be used to initialize your  application's 
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly. 
*/ 
App.Viewport = Ext.extend(Ext.Panel, { 
id  : 'viewport', 
layout : 'card', 
fullscreen: true, 
cardSwitchAnimation: 'slide', 

initComponent: function() { 

    Ext.apply(this, { 

     dockedItems: [ 
      { 
       // Top Bar 
       dock : 'top', 
       xtype : 'toolbar', 
       title : 'Whats Good', 
       items: [ 
        { 
         text: 'About' 
        }, 

       ] 
      } 


     ] 
    }); 


App.Viewport.superclass.initComponent.apply(this, arguments); 
} 

}); 
Ext.reg('App.Viewport', App.Viewport); 

새로운 코드 : 나는 뷰포트 패널은 트위터의 예와 같이 많은 초기화가

내가 패널의 종류는 현재 렌더링되는 기반으로 조건부 DockedItems (도구 모음)를 적용 할 수 있도록하려면

if (!App.viewport.getDockedComponent(homeBar)) { 
     var homeBar = new App.HomeBar(); 
     App.viewport.addDocked(homeBar); 
    } 

뷰포트에서. 예 : 로그인, 홈 화면, 세부 화면 등에 대한 설명입니다.

Ext.apply (App.Viewport, {dockedItems : [App.LoginBar]})를 사용해 보았습니다. 하지만 그건 작동하지 않습니다. 현재는 현재 렌더링 패널에 도구 모음을 추가하고 전체 화면으로 설정하기 위해 노력하지만, 불행히도 전환 및 가지 구조가

이

Panel 
Toolbar 
    Panel 
    Toolbar 
    /end Panel 
/end Panel 

이

사람이 제안이 있습니까이기 때문에 이상하게 행동?

Answer 1

응용 프로그램의 뷰포트에 대한 참조를 얻으려면 '응용 프로그램'네임 스페이스를 통해 들어갈 수 있습니다.이 네임 스페이스는 regApplication 구성의 name 속성에 의해 자동으로 만들어집니다.

그래서 당신은 당신의 도구 모음 단추 예를 들어이 작업을 수행 할 수 있습니다 : 버튼을 누를 때 제목 변경을 만들 것

{ 
    text: 'About', 
    handler: function() { 
     App.viewport.getDockedItems()[0].setTitle('Pressed!'); 
    } 
}, 

합니다.

하지만 지금은 무엇을하려고하는지 더 잘 이해하고 있습니다. 동적으로 변경된 단일 툴바를 바깥 뷰포트에 고정시키지 말고 각 도구 모음을 각 (카드) 패널에 추가하는 것이 좋습니다. 그것. 그런 식으로 그들은 너무 멋지게 슬라이드 할 수 있습니다 :-)

Answer 2

프로그래밍이 같은

viewport.addDocked(loginBar); 

방법은 구성 요소의 원래 구성을 업데이트하는 것보다 훨씬 더 나은 사용하는 것이 좋습니다 것, 고정 된 항목을 추가합니다.

그런 다음 다시 제거하려면 .removeDocked() 메소드가 있습니다.

또한 클래스를 업데이트하지 않고 구성 요소의 인스턴스를 다루고 있는지 확인하십시오.