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

1. MVC Pattern

1) Model / View / Controller 

 

2. Ext.container 상속

1) extend : 상속 키워드

2) requires : 필수 멤버 설정

3) config : 설정 관련 키워드  (정적 설정)

4) constructor : 설정 Function  (동적 설정 가능)

 

            Constructor:function(config)

{

config = config || {};

this.callParent([config]);

}

       

 

3. View 만들기

1) 파일 만들기

ㄱ. >workspace>HelloWorld>app>view> 에서 오른쪽 마우스 클릭  

ㄴ. New > File > ‘TestView.js’

2) 클래스 이름 정하기 : {프로젝트명}.{폴더명}.{파일명}

3) xtype 이름 정하기 (ID 값, unique 해야함)

4) app.js views: 에 등록  (Optional,  단, controller는 필수)

5) config:{…} 사이에 코딩하기   

 

 

4. Controller 만들기

1) 프로젝트에서 Consolee환경으로 이동

2) Sencha Command tool

 ./sdk/command/sencha generate controller –n TestView 

3) config, refs, control

4) launch:function(app)  : 필요없는 경우, 삭제

# 이벤트 사용할 경우, ID 방식 말고, Action을 사용해라. 

  (ID일 경우, 선언 클래스가 해제될 경우 에러 발생)

 

5. 실습 프로젝트

1) TestView.js | View

Ext.define('HelloWorld.view.TestView', {

           extend: 'Ext.Panel',

           xtype:'testview',

           config : {

                     layout: 'vbox',

                     items:[

                     {

                                xtype:'toolbar',

                                title:'Simverse',

                     },

                     {

                                xtype:'panel',

                                html:'TextView for Simverse',

                     },

                     {

                                xtype:'button',

                                text:'click me, Simvere',

                                action:'testview.onClickedClickmeButton'

                     }

                     ],

           },

})

 

2) TestView.js | Controller

 

Ext.define('HelloWorld.controller.TestView', {

    extend: 'Ext.app.Controller',

   

    config: {

        refs: {

        testview:'testview',

        },

        control: {

        'button[action=testview.onClickedClickmeButton]':{

                    tap:'onClickedClickmeButton'

        },

        },

    },

   

    onClickedClickmeButton:function(){

          alert('onClickedClickmeButton');

    }

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

    //launch: function(app) {

});

 

  3) app.js  ( launch: 부분)

    ...............

    launch: function() {

        // Destroy the #appLoadingIndicator element

        Ext.fly('appLoadingIndicator').destroy();

 

                   var testView = Ext.create('HelloWorld.view.TestView');

                  

                   if(!Ext.os.is.Phone)

                   {

                             Ext.Viewport.add({

                                        xtype:'panel',

                                        width:480,

                                        height:800,

                                        centered:true,

                                        modal: true,

                                        hideOnMaksTop:false,

                                        layout : 'fit',

                                        items:[testView]

                             });

                   }

                   else

                   {

                             Ext.Viewport.add(testView);

                   }

                  

 

        // Initialize the main view

        //Ext.Viewport.add(Ext.create('HelloWorld.view.Main'));

    },

 

   ..................

 

  4) 실행화면