1. [Ext.js 기본문법 ]
Ext.application({
name: 'mvc_study',
appFolder : '/mvc_study',
controllers: [
'MvcController'
],
autoCreateViewport: true
});
JavaScript
복사
•
name : ExtJS 어플리케이션 네이밍을 의미
•
appFolder : mvc구조의 root 폴더를 의미 (정의하지 않을시 app디렉토리명이 default)
•
controllers : 컨트롤러 클래스명을 의미
•
autoCreateViewport : true로 주어야 view에 대한 기능 동작
Ext.define('mvc_study.view.button.CustomButton', {
extend: 'Ext.button.Button',
alias : 'widget.customButton',
text : '내가만든버튼',
config : {
title : 'code'
},
handler : function(){
alert("클릭!!");
},
initComponent: function() {
this.callParent();
}
});
JavaScript
복사
•
extend : '상속받고자하는 ExtJS 클래스'
•
Ext.define 과 Ext.create : Class를 정의하고 생성한다
•
alias : "xtype : 'xxx'" 처럼 주기위한 명칭 xtype 지정시 widget은 생략하고 다음에 위치하는 'customButton' 을 xtype으로 지정이가능
•
text / handler ... : 버튼컴포넌트에서 지원하는 속성
•
initComponent : 컴포넌트 초기화(별도로 내부적으로 기능구현을 하려면 필요)
•
config : config 선언 안에 프로퍼티를 설정할 경우 각 프로퍼티에 대해 getter, setter, reset, apply 라는 4가지 메소드를 자동으로 생성해 준다.
reset 함수는 해당 프로퍼티를 default 값으로 설정해 주며,
apply 함수는 setter 함수가 호출될때마다 호출된다.
•
filter, grouping, paging, sorting 등의 옵션을 명시할 경우, 이런 정보들은 request parameter 에 추가된다.
•
○ filterParam : 데이터를 필터링하기 위해 서버로 보내지는 filter parameter 의 이름을 설정한다.-
•
○ groupParam : 데이터를 그룹핑하기 위해 서버로 보내지는 group parameter 이름을 설정한다.
•
○ pageParam : 특정 페이지를 조회하기 위해 서버로 보내지는 page parameter 의 이름을 설정한다. 기본 값은 page 이다.
•
○ startParam : 서버로 보내지는 start Model parameter 의 이름을 설정한다. 기본 값은 start 이다.
•
○ limitParam : 서버로 보내지는 limit Model parameter 의 이름을 설정한다. 기본 값은 limit 이다.
•
○ sortParam : 정렬을 위해 서버로 보내지는 sort parameter 의 이름을 설정한다. 기본 값은 group 이다.
•
○ extraParam : 서버로의 요청시마다 서버로 보내지는 parameter 들의 이름을 설정한다.
•
Operation 을 설정할 때 다음과 같은 옵션을 사용할 수 있다.
•
○ action : 수행하고자 하는 액션을 설정한다. read,create,update,destroy(delete) 등으로 설정할 수 있다.
•
○ batch : Ext.data.Batch 오브젝트의 일부분이다.
•
○ filters : 필터 배열을 설정한다.
•
○ group : 그룹핑을 위해 설정한다.
•
○ limit : 서버로부터 로딩하고자 하는 Model 객체의 개수를 설정한다.
•
○ sorters : 정렬기 배열을 설정한다.
•
○ start : paging 시 사용되며, 첫번 째 모델 번호를 설정한다.
•
filters, group, limit, sorters, start 등의 옵션은 요청시에만 사용된다.
출처:
[Rednics Blog]
•
Ext.onReady란?
HTML 페이지가 전체 출력이 완료 된 다음 onReady로 감싼 영역을 실행하겠다라는 의미
Ext.onReady(function () {
Ext.create('Ext.panel.Panel, {
Ext.Msg.alert('chapter1', 'Hello World')
})
}
// 위에 코드를 JavaScript와 JQuery로 바꿔보면
window.onload()
$(document.ready({});
$(function(){});
JavaScript
복사
2. [ Ext JS Data Package 구성 ]
[ Ext.app.ViewModel Class (Model) ]
Model 클래스는 데이터를 처리하기 위한 field 들과 함수의 셋으로 구성된다.
여러개의 모델을 정의해서 Association을 통해 서로 연관시킬 수 도있고,
Validations를 사용해서 데이터를 검증할 수 도 있으며,
Proxy를 통해서 데이터를 로딩 할 수 도 있다.
