Sencha Touch 센차터치 app 내부 파일 구조

Sencha generate 를 이용하여 app을 생성하면 아래와 같은 구조의 directory, file framework로 생성된다. 

• app - The directory containing the Models, Views, Controllers, and Stores for your app.
• app.js - The main JavaScript entry point for your app.
• app.json - The configuration file for your app.
• index.html - The HTML file for your app.
• packager.json - The configuration file used by Sencha Cmd for creating native packages for your application.
• resources - The directory containing the CSS and the images for your app

app.js 파일에는 Sencha Touch의 엔트리 포인트 코드가 들어있다.

app실행 시 main 객체를 생성하고, main view를 생성하는 코드 이다. 

객체 지향에서 흔히 사용하는 entry code로 크게 수정할 내용은 없어 보인다 .

아래는 app.js의 샘플 코드이다. 

Ext.application({

    name: 'Test',

    extend: 'Test.Application',

    

    autoCreateViewport: 'Test.view.main.Main'

    //-------------------------------------------------------------------------

    // Most customizations should be made to Test.Application. If you need to

    // customize this file, doing so below this section reduces the likelihood

    // of merge conflicts when upgrading to new versions of Sencha Cmd.

    //-------------------------------------------------------------------------

});

/app/view/main/Main.js에는 main view 의 UI 코드가 들어있다. 

Ext.define('Test.view.main.Main', {

    extend: 'Ext.container.Container',

    xtype: 'app-main',

    

    controller: 'main',

    viewModel: {

        type: 'main'

    },

    layout: {

        type: 'border'

    },

    items: [{

        xtype: 'panel',

        bind: {

            title: '{name}'

        },

        region: 'west',

        html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',

        width: 250,

        split: true,

        tbar: [{

            text: 'Button',

            handler: 'onClickButton'

        }]

    },{

        region: 'center',

        xtype: 'tabpanel',

        items:[{

            title: 'Tab 1',

            html: '<h2>Content appropriate for the current navigation.</h2>'

        }]

    }]

});

Test.view.main.Main에 대한 클래스는 Ext.define 함수를 사용해서 선언한다. 

Ext.define('Test.view.main.Main', {         // Ext.define 함수를 사용하여 class선언 

    extend : 'Ext.container.Container',     // Ext.container.Container 를 상속 받는다. 

   controller: 'main',

    viewModel: {

        type: 'main'

    }

   .... 

});