[FormView 구현하기]
1. FormView 파일 작성
ㄱ. [프로젝트홈]/app/view/에 FormView.js 추가
ㄴ. 아래 내용 추가
Ext.define( 'Sencha.view.formView',{
extend:'Ext.form.Panel',
xtype : 'formview',
config:{
layout:'vbox',
items:[
{
xtype: 'formpanel',
flex: 1,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'form test',
items: [
{
xtype: 'textfield',
name: 'inputId',
label: 'ID',
},
{
xtype: 'passwordfield',
name: 'inputPassword',
label: 'Password',
},
],
},
{
xtype: 'button',
text: 'SAVE',
action: 'formview.onClickedSaveButton'
}
],
},
]
}
});
2. controller 구현하기
1) FormViewController 만들기
ㄱ. [프로젝트홈] 터미널 실행
ㄴ. command 실행
./sdk/command/sencha generate controller -n FormViewController
2) control 이벤트 및 호출함수 구현
Ext.define('Sencha.controller.FormViewController', {
extend: 'Ext.app.Controller',
config: {
refs: {
formView:'formview',
},
control: {
'button[action=formview.onClickedSaveButton]': {
tap:'onClickedSaveButton',
},
},
},
//called when the Application is launched, remove if not needed
// launch: function(app) {
//
// }
onClickedSaveButton: function() {
var formObj = this.getFormView().down('formpanel');
alert(formObj.inputId.getValue());
console.log(formObj.inputId);
}
});
'프로그래밍 > Mobile Web App 개발' 카테고리의 다른 글
| [모바일 웹앱 전문 개발자 과정] 6일차 4/8 #3 (ListView) (0) | 2012.04.08 |
|---|---|
| [모바일 웹앱 전문 개발자 과정] 7일차 4/8 #1 (naviView) (0) | 2012.04.08 |
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #2 (0) | 2012.04.08 |
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #1 (0) | 2012.04.07 |
| [모바일 웹앱 전문 개발자 과정] 5일차 4/6 (0) | 2012.04.06 |
