1. Sench Touch Carousel (컨베이어 벨트) 구현하기
extend: 'Ext.Panel',
config: {
layout:'vbox',
items:[
{
xtype:'toolbar',
title:'Carousel',
},
{
xtype:'carousel',
flex:1,
direction:'horizontal',
items:[
{
xtype:'panel',
style:'background-color:red;',
html:'1',
},
{
xtype:'panel',
style:'background-color:blue;',
html:'2',
},
{
xtype:'panel',
style:'background-color:green;',
html:'3',
}
]
}
]
}
});
[결과화면]
2. Sencha Touch Image 구현하기
임의의 이미지 하나를 저장하여, Sencha Touch 프로젝트 내, resources/images/ 폴더로 복사함.
Ext.define("HelloWorld.view.Main", {
extend: 'Ext.Panel',
config: {
layout:'vbox',
items:[
{
xtype:'toolbar',
title:'Carousel',
},
{
xtype:'carousel',
flex:1,
direction:'horizontal',
items:[
{
xtype:'image',
src:'resources/images/girlsgeneration.png',
},
{
xtype:'panel',
style:[
'background-color:transparent;',
'background-image:url(resources/images/girlsgeneration.png);',
'background-repeat:no-repeat;',
'border:0;',
'background-size:100% 100%;',].join(''),
}
]
}
]
}
});
[결과화면] : 홀~ 쭉해진...
3. Sencha Touch Button 적용
Ext.define("HelloWorld.view.Main", {
extend: 'Ext.Panel',
config: {
layout:'vbox',
items:[
{
xtype:'toolbar',
title:'Carousel',
},
{
xtype:'carousel',
flex:1,
direction:'horizontal',
items:[
{
xtype:'image',
src:'resources/images/girlsgeneration.png',
},
{
xtype:'panel',
style:[
'background-color:transparent;',
'background-image:url(resources/images/girlsgeneration.png);',
'background-repeat:no-repeat;',
'border:0;',
'background-size:100% 100%;',
].join(''),
},
{
xtype: 'button',
text : 'Click me !',
handler:function()
{
Ext.Msg.alert('알람', '이것은 메시지창!', Ext.emptyFn);
}
},
]
}
]
}
});
[결과화면] 세번째 항목 전체화면이 버튼으로 적용되었고, sencha Touch에서 제공되는 깔끔한 alert 창을 볼 수 있다.
4. 폰 크기로 화면 설정하기
Ext.os.is를 사용하여, 폰일 경우와 일반 자동차일 경우, 파별화된 서비스 제공
app.js를 수정
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var mainView = Ext.create('HelloWorld.view.Main');
if(!Ext.os.is.Phone)
{
Ext.Viewport.add({
xtype:'panel',
width:480,
height:800,
centered:true,
modal: true,
hideOnMaksTop:false,
layout : 'fit',
items:[mainView]
});
}
else
{
Ext.Viewport.add(mainView);
}
[실행화면]
1) Browser 종류 : Ext.browser.is
Safari
Chrome
Opera
Dolfin
webOSBrowser
ChromeMobile
Firefox
IE
Other
[적용예]
xtype: 'button',
text: 'test',
handler: function () {
console.log('Safari : ' + Ext.browser.is('Safari'));
console.log('Chrome : ' + Ext.browser.is('Chrome'));
console.log('Opera : ' + Ext.browser.is('Opera'));
console.log('Dolfin : ' + Ext.browser.is('Dolfin'));
console.log('webOSBrowser : ' + Ext.browser.is('webOSBrowser'));
console.log('ChromeMobile : ' + Ext.browser.is('ChromeMobile'));
console.log('Firefox : ' + Ext.browser.is('Firefox'));
console.log('IE : ' + Ext.browser.is('IE'));
console.log('Other : ' + Ext.browser.is('Other'));
}
2) OS 종류 : Ext.os.is
iOS
Android
webOS
BlackBerry
RIMTablet
MacOS
Windows
Linux
Bada
Other
[적용예]
xtype: 'button',
text: 'test',
handler: function () {
console.log('iOS : ' + Ext.os.is('iOS'));
console.log('Android : ' + Ext.os.is('Android'));
console.log('webOS : ' + Ext.os.is('webOS'));
console.log('BlackBerry : ' + Ext.os.is('BlackBerry'));
console.log('RIMTablet : ' + Ext.os.is('RIMTablet'));
console.log('MacOS : ' + Ext.os.is('MacOS'));
console.log('Windows : ' + Ext.os.is('Windows'));
console.log('Linux : ' + Ext.os.is('Linux'));
console.log('Bada : ' + Ext.os.is('Bada'));
console.log('Other : ' + Ext.os.is('Other'));
}
Word 파일 : 
모바일 웹앱 전문 개발자 과정_0406.docx
'프로그래밍 > Mobile Web App 개발' 카테고리의 다른 글
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #2 (0) | 2012.04.08 |
|---|---|
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #1 (0) | 2012.04.07 |
| [모바일 웹앱 전문 개발자 과정] 4일차 4/5 (0) | 2012.04.06 |
| [모바일 웹앱 전문 개발자 과정] 3일차 4/4 (0) | 2012.04.05 |
| [모바일 웹앱 전문 개발자 과정] 2일차 4/3 (0) | 2012.04.05 |
