하이브리드 앱 센차터치 2.0 - 탭 패널의 이해

1. 개요

이미지를 배치할 때 각 이미지를 제어할 수 있는 탭을 구성해주는 기능을 제공해준다.

 

 

2. 구현

 

Ext.Loader.setConfig({enabled:true});

Ext.require("Ext.Panel");

Ext.require("Ext.tab.Panel");

Ext.application({

name:"MyApp_tapPanel",

launch:function(){

 

// HomeView 페이지 정의

Ext.define("HomeView",{

extend:"Ext.panel,

config:{

title:"HomeView",

style:"background-image:url( 'bgimg/bg1.jpg' );",

html:"홈 뷰 영역"

}

});

// LoginView 페이지 정의

Ext.define("LoginView",{

extend:"Ext.panel,

config:{

title:"LoginView",

style:"background-image:url( 'bgimg/bg2.jpg' );",

html:"로그인 뷰 영역"

}

});

 

// ListView 페이지 정의

Ext.define("ListView",{

extend:"Ext.panel,

config:{

title:"ListView",

style:"background-image:url( 'bgimg/bg3.jpg' );",

html:"리스트 뷰 영역"

}

});

 

// Panel 을 상속받는 각 페이지 생성

var homeView = Ext.create("HomeView");

var loginView = Ext.create("LoginView");

var listView = Ext.create("ListView");

 

// 각 페이지를 탭패널에 배치

var tabPanel = Ext.create("Ext.tab.Panel",{

items:[homeView, loginView, listView]

});

 

// 출력

Ext.Viewport.add( tabPanel );

}

});

 

탭패널의 메뉴명은 각 페이지 속성의 title 옵션을 사용한다.