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'
}
....
});
