Sencha UI에 공통 코드를 사용하는 방법은 무엇입니까?

Question

내 응용 프로그램에서, 나는 모든 화면에 상단 바와 하단 탭 표시 줄이 있습니다. 따라서 사용자가 특정 탭을 클릭하면 화면의 중간 부분 (탭 바와 도구 모음은 동일하게 변경됩니다) 만 변경됩니다. 그래서이 tabbar 및 도구 모음에 대한 몇 가지 일반적인 코드를 작성하고 싶습니다. 그렇다면 어디에서 공통 코드를 유지해야합니까 ?? 보기 폴더에 있습니까 ??

코드 또는 샘플 프로젝트를 공유 할 수있는 사람이 있다면 도움이 될 것입니다.

미리 감사드립니다.

Answer 1

고도로 최적화 된 응용 프로그램을 빌드하는 것으로 보입니다.

가장 좋은 방법은 다음과 같습니다

Ext.define('app.views.MainView', { 
    extend: 'Ext.Container' // container is the best way almost time 
    config: { 
    layout: 'card' // just for example 
    items: [ 
     {xtype: 'MainTopToolbar'}, 
     {xtype: 'DynamicView'}, 
     {xtype: 'MainTabBar'}, 
    ] 
    // other configs go here... 
    } 
}) 

이 단계의 목적은 응용 프로그램에 대한 전반적인 레이아웃을 정의하는 것입니다

1) 귀하의 MainView.js처럼 보일 것입니다. 보시다시피, 여기에는 세 가지 주요 구성 요소가 포함됩니다 (두 번째 동적 요소 - 사용자 상호 작용에 따라 변경 될 것입니다).

2) 예를 들어, MainTabBar이을xtypes 정의 :

Ext.define('app.views.MainTabBar', { 
    extend: 'Ext.TabBar', 
    xtype: 'MainTabBar'. 
    config: { 
    docked: 'bottom', 
    items: [ 
     // your tabs are defined here, see Ext.TabBar docs for more details 
    ] 
    // other configs go here... 
    } 
}) 

3) 모든 xtypes 정의 파일을 넣어뿐만 아니라 MainView.js에서 보기 폴더. 에서

4)는,이 문제는 매우 일반적이며, 조금 복잡하므로 시간 브레인 스토밍을 보내주십시오 Ext.create('app.views.MainView');

전화 app.js. 명확한 것이 있으면 알려주세요.