[모바일 웹앱 전문 개발자 과정] 6일차 4/7 #2

Navigation Bar 구현하기

 

1. Navigation

1) Ext.navigation.View

2) 화면 스택관리

3) 편리한 사용법

4) navigation.View 하위로 들어가는 아이템은 ‘card’만 적용가능

5) navigation은 titlebar를 포함하고 있음

6) 새로운 View를 만들 때, 기본적으로 ‘Ext.Panel’에서 상속받도록 함

  (특정 UI에서 상속이 불가할 수 있음)

7) push(item)  /  pop()

8) controller 는 항상 전역으로 생성된다.  

9) 버튼 이벤트 연동시, ID 방식은 유효성 체크로 인하여, 에러를 유발할 염려가 있으므로, 액션을 사용

 

 

2. 실습

1) 새로운 프로젝트를 생성

  ㄱ. workspace dir (‘sencha-touch-2.0.0-gpl/workspace’) > 오른쪽 클릭 > show in > Terminal

  ㄴ. ‘Sencha’ 이름으로 프로젝트 생성

 

$ ./command/sencha app create –n Sencha -p ./workspace/Sencha -l all

 

2) app > view : 오른쪽 클릭  [ new > file > NaviView.js ]

 

Ext.define('Sencha.view.NaviView', {

        extend:'Ext.navigation.View',

        xtype : 'naviview',

        requires:[

                   'Sencha.view.MenuView',

        ],

        config:{

                   autoDestory: false,

                   navigationBar:false,

       

                   items:[

                  

                             {

                                        xtype:'menuview',

                             }

                   ]

       

        },

});

   3) app > view : 오른쪽 클릭  [ new > file > MenuView.js ]

Ext.define('Sencha.view.MenuView',{

        extend:'Ext.Panel',

        xtype : 'menuview',

       

        config:{

                   layout:'vbox',

                   title:'다시보기',

                   items:[

                             {

                                        xtype:'button',

                                        text:'짜짱면',

                                        action:'menuview.jjajang',

                             },

                             {

                                        xtype:'button',

                                        text:'짬뽕',

                                        action:'menuview.jjambong',

                             }

       

                   ],

        }

})

 

 

 4) app>view>Main.js 수정

 

Ext.define("Sencha.view.Main", {

    extend: 'Ext.Panel',

    requires: [

       'Ext.TitleBar',

       'Sencha.view.NaviView',

    ],

   

    config: {

       layout:'fit',

        items: [

        {

                 xtype:'naviview',

        },

       ],

    },

});

 

 

4) controller 추가 

ㄱ. ./sdk/command/sencha generate controller -n Menu

ㄴ. [project]/app/controller/MenuController.js 편집

 

 

Ext.define('Sencha.controller.MenuController', {

    extend: 'Ext.app.Controller',

   

    config: {

        refs: {

                 naviView:'naviview',           

        },

        control: {

                 'button[action=menuview.jjajang]': {

                            tap:'onClickedJjajang',

                 },

                

                 'button[action=menuview.jjambong]': {

                            tap:'onClickedJjambong',

                 },

        },       

        },

  

    // //called when the Application is launched, remove if not needed

    // launch: function(app) {

      

    onClickedJjajang:function()

    {

       var ansPanel = {

                  xtype:'panel',

                  html: '짜장면',

                  title:'짜장면',                

       };

      

       this.getNaviView().push(ansPanel);

      

    },

   

    onClickedJjambong:function()

    {

       var ansPanel = {

                  xtype:'panel',

                  html: '짬뽕',

                  title:'짬뽕',

       };

      

      

       this.getNaviView().push(ansPanel);

    },

   

});

 

      this.getNaviView().push(ansPanel);  -> 상단에서 refs를 기준으로 생성되는 getter를 이용

                                                         ( get+첫문자의 대문자 + 나머지명칭 + () )