[Sencha Touch 2] View 클래스 정의 및 호출 방법

“TestView” 가 선언되는 위치에 따라 생성 방법. 아래는 “Appspresso 어플리케이션 프로젝트”의 디렉토리 구조이다.

.

“TestView” 의 코드는 다음과 같다.

   Ext.define(“TestApp.view.TestView“,{
      extend:”Ext.Panel”,
      xtype:”testview”,
      id:”testview”,
      config:{
            title:”testView”,
            iconCls:”testview”,
            scrollable:true,
            styleHtmlContent:true,
            html:[
                     '<center>',
                     '<img src="/icon.png">',
                     '<h3>Welcome to Sencha Touch</h3>',
                     '</center>'
            ].join(“”)
       }
    });

 

1. index.html 안에서 <script/> 태그 안에서 선언된 경우

<script type=”text/javascript>

/* TestView 선언 부분 */

 

    Ext.application({
          name:”TestApp”,
          launch:function(){
                var panel = Ext.create(“TestApp.view.TestView“);
                Ext.Viewport.add(panel);
          }
    });

</script>

 

2. 별도의 파일(TestView.js)로 선언되어 있는 경우, TestView.js 파일은 /app/view 폴더 안에 있어야 한다.

<script type=”text/javascript>

      Ext.application({
            name:”TestApp”,

            launch:function(){
                  var panel = Ext.create(“TestApp.view.TestView”);
                  Ext.Viewport.add(panel);
            }
      });

</script>

 

임의의 폴더에 View 파일을 저장하려면 appFolder 에 app 폴더로 사용할 폴더의 경로를 넣어준다. 즉, /js  디렉토리 밑에 app 폴더를 두는 경우는 appFolder:’/js/app’ 값을 추가해 준다.

<script type=”text/javascript>

Ext.application({
name:”TestApp”,
appFolder:”/js/app”,

launch:function(){
var panel = Ext.create(“TestApp.view.TestView”);
Ext.Viewport.add(panel);
}
});

</script>

 

실행결과