NavigationView 사용시 기본 툴바를 사용하지 않고, 사용자 지정 Toolbar를 사용하는 방법

 

1. NavigationView에서 툴바를 숨김.  (/app/view/NaviView.js)

 

           config:{

                     autoDestory: false,

                     navigationBar:false,

                      items:[

                                {

                                          xtype:'menuview',

                                }

                     ]

           },

 

 

2. 하위 뷰에서 툴바를 생성하고, Back button 추가

( 하위 뷰를 Controller에서 생성하여 사용중임 : (/app/controller/MenuController.js)

 

    onClickedJjajang:function()

    {

          var ansPanel = {

                    xtype:'panel',

                    html: '짜장면',

                    title:'짜장면',

 

                                items:[

                                          {

                                                     xtype:'toolbar',

                                                     title:'짜장면',

                                                    

                                                     items:[

                                                                 // new Ext.Button(

                                                                          // {

                                                                                     // ui:'back',

                                                                                     // text:'back',

                                                                                     // action:'naviBack',

                                                                          // }

                                                                          // ),

                                                                          {

                                                                                     xtype:'button',

                                                                                     text:'back',

                                                                                     ui:'back',

                                                                                     action:'naviBack',

                                                                          },

                              ],

                                                    

                                          },

                                ],

                   

          };

         

          this.getNaviView().push(ansPanel);

         

    },

 

 

3. 액션 이벤트 연결: (/app/controller/MenuController.js)

 

config: {

refs: {

naviView:'naviview',           

        },

        control: {

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

                    tap:'onClickedJjajang',

        },

       

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

                    tap:'onClickedJjambong',

        },

        'button[action=naviBack]': {

                    tap:'onClickedBack',

        }

        },       

      },

 

     …......................

 

onClickedBack:function()

    {

          this.getNaviView().pop();

    }

 

Posted by 꿈을펼쳐라
,

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+첫문자의 대문자 + 나머지명칭 + () )

Posted by 꿈을펼쳐라
,