- Panel 공부 -
index.html
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="./libs/resources/css/sencha-touch.css">
<script src="./libs/sencha-touch.js"></script>
<script src="./js/index.js"></script>
<script src="./js/doc.js"></script>
<script src="./js/panel.js"></script>
<script>
// 센챠 초기화
Ext.setup({
// main함수
onReady : function() {
var mainPanel = new Ext.TabPanel({
id : 'mainPanel', // 개발자가 지정하는 식별자, 모든 component에 지정가능
fullscreen : true,
items : [docked, panels], // TabPanel을 사용했기 때문에 layout은 기본 card layout임
tabBar : { // TabPanel은 card layout + toolbar
scroll : 'horizontal', // toolbar 버튼이 많아서 스크롤 되어 한다면
dock : 'bottom',
layout : {
pack : 'center'
}
},
listeners : { // event 처리
cardswitch : myHandler // myHandler 펑션 호출
}
});
}
});
</script>
</head>
<body>
</body>
</html>
index.js
var myHandler = function(container, newCard, oldCard, index) {
alert("[" + container.id + "/" + newCard.id + "/" + oldCard.id + "/" + index + "]");
}
doc.js
var docked = new Ext.Panel({
fullscreen : true,
title : 'dock', // 해당 panel이 mainPanel의 item으로 들어가는데 mainPanel이
// TabPanel이다. 자동 화면과 버튼이 생김, 버튼의 문자열
iconCls : 'info', // 버튼의 iconcss class 명
badgeText : '1', // 버튼위에 들어가는 그림모양의 문자(SMS 아이콘의 문자 카운트건수 표시 같은거)
id : 'docked',
html : 'Docked Test', // html로 화면구성하거나 items로 component 추가하거나
dockedItems : [{
dock : 'top',
style : 'background : #ffff00',
html : "<center>Dock-Top</center>"
},{
dock : 'left',
style : 'background : #0000ff',
html : "<center>Dock-Left</center>"
}]
});
panel.js
var panels, panela, panelb, panel1, panel2, panel3;
panela1 = new Ext.Panel({
bodyStyle : 'background : #ffffff'
});
panela2 = new Ext.Panel({
bodyStyle : 'background : #ffff00'
});
panela3 = new Ext.Panel({
bodyStyle : 'background : #ff00ff'
});
panela = new Ext.Panel({
layout : { // items의 정렬규칙
type : 'hbox', // 가로방향 나열
align : 'stretch'
},
defaults : { // items 마다 공통사항 정의
flex : 1 // 확장비율
},
items : [panela1, panela2, panela3]
});
panelb = new Ext.Panel({
bodyStyle : 'background : #00ffff'
});
panels = new Ext.Panel({
fullscreen : true,
title : 'panel', // mainPanel에 붙힐거임, 버튼의 문자열
iconCls : 'favorites',
badgeText : '2',
id : 'panel',
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
flex : 1
},
items : [panela, panelb]
});
결과
# ajax 통신
doc.js
var docked = new Ext.Panel({
fullscreen : true,
title : 'dock', // 해당 panel이 mainPanel의 item으로 들어가는데 mainPanel이
// TabPanel이다. 자동 화면과 버튼이 생김, 버튼의 문자열
iconCls : 'info', // 버튼의 iconcss class 명
badgeText : '1', // 버튼위에 들어가는 그림모양의 문자(SMS 아이콘의 문자 카운트건수 표시 같은거)
id : 'docked',
html : 'Docked Test', // html로 화면구성하거나 items로 component 추가하거나
dockedItems : [{
dock : 'top',
style : 'background : #ffff00',
html : "<center>Dock-Top</center>"
},{
dock : 'left',
style : 'background : #0000ff',
html : "<center>Dock-Left</center>"
}]
});
index.js
var myHandler = function(container, newCard, oldCard, index) {
alert("[" + container.id + "/" + newCard.id + "/" + oldCard.id + "/" + index + "]");
if (index == 2) {
// 외부 파일 ajax 연동
Ext.Ajax.request({
url : 'some.html',
success : function(response, opts) {
Ext.getCmp('html1').getActiveItem().update(response.responseText);
}
});
} else if (index == 4) {
// 서버 연동 시작하면서 화면에 mask(화면 block)를 띄운다
Ext.getBody().mask("Loading...","loading 중입니다.", false);
// 화면을 구성할 templete 객체를 초기화 ***********************
var tpl = Ext.XTemplate.from('userInfo'); // userInfo라는 문자열을 갖는 템플릿을 사용하겠다 (index.html에서 사용할 것임)
Ext.util.JSONP.request({
url : 'some.jsp',
callbackKey : 'callback',
params : { // 전송할 데이터
userId : 'kkang'
},
callback : function(result) { // 결과처리
if (result != "") {
var html = tpl.applyTemplate(result);
Ext.getCmp("html3").getActiveItem().update(html);
}
Ext.getBody().unmask();
}
})
}
}
html.js
// 외부 html 파일 연동
var html1 = new Ext.Panel({
id : 'html1',
fullscreen : true,
title : 'html1',
iconCls : 'info',
layout : {
type : 'card',
pack : 'center'
},
items : [{
html : ' '
}]
});
// body 영역의 html을 id로 지칭하여 사용
var html2 = new Ext.Panel({
id : 'html2',
fullscreen : true,
title : 'html2',
iconCls : 'info',
layout : {
type : 'card',
pack : 'center'
},
items : [{
contentEl : 'someId' // El : element 의 약자, some.html의 내용중 div의 id값
}]
});
// server 연동으로 json 데이터 획득해서 template에 적용하는 방법
var html3 = new Ext.Panel({
id : 'html3',
fullscreen : true,
title : 'html3',
iconCls : 'info',
layout : {
type : 'card',
pack : 'center'
},
items : [{
html : ' '
}]
});
panel.js
var panels, panela, panelb, panel1, panel2, panel3;
panela1 = new Ext.Panel({
bodyStyle : 'background : #ffffff'
});
panela2 = new Ext.Panel({
bodyStyle : 'background : #ffff00'
});
panela3 = new Ext.Panel({
bodyStyle : 'background : #ff00ff'
});
panela = new Ext.Panel({
layout : { // items의 정렬규칙
type : 'hbox', // 가로방향 나열
align : 'stretch'
},
defaults : { // items 마다 공통사항 정의
flex : 1 // 확장비율
},
items : [panela1, panela2, panela3]
});
panelb = new Ext.Panel({
bodyStyle : 'background : #00ffff'
});
panels = new Ext.Panel({
fullscreen : true,
title : 'panel', // mainPanel에 붙힐거임, 버튼의 문자열
iconCls : 'favorites',
badgeText : '2',
id : 'panel',
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
flex : 1
},
items : [panela, panelb]
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="./libs/resources/css/sencha-touch.css">
<script src="./libs/sencha-touch.js"></script>
<script src="./js/index.js"></script>
<script src="./js/doc.js"></script>
<script src="./js/panel.js"></script>
<script src="./js/html.js"></script>
<script>
// 센챠 초기화
Ext.setup({
// main함수
onReady : function() {
var mainPanel = new Ext.TabPanel({
id : 'mainPanel', // 개발자가 지정하는 식별자, 모든 component에 지정가능
fullscreen : true,
items : [docked, panels, html1, html2, html3], // TabPanel을 사용했기 때문에 layout은 기본 card layout임
tabBar : { // TabPanel은 card layout + toolbar
scroll : 'horizontal', // toolbar 버튼이 많아서 스크롤 되어 한다면
dock : 'bottom',
layout : {
pack : 'center'
}
},
listeners : { // event 처리
cardswitch : myHandler // myHandler 펑션 호출
}
});
}
});
</script>
</head>
<body>
<div id="someId" class="x-hidden-display">
someId 의 내용임
</div>
<!-- 이하의 template 객체의 설정은 막 꽁짜로 쓰는것이 아님, index.js에 template을 사용할 수 있게 정의해야함 -->
<div id="userInfo" class="x-hidden-display">
<tpl for="."><!-- 화면에 찍어줘야 할 문자열 -->
ID : {userId}<br/>
Phone : {phone} <br/>
</tpl>
</div>
</body>
</html>
some.html
<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
<sciprt>
window.onload = function() {
alert('some.html');
}
</sciprt>
</head>
<body>
some.html 파일입니다(외부연동용)
</body>
</html>
some.jsp
Ext.util.JSONP.callback([
{"userId" : "${param.userId}","phone":"010000"},
{"userId" : "${param.userId}","phone":"012345"}
])
결과
# proxy 이용한 데이터 통신
첨부파일 참조
CH8-Sencha.zip