Extjs교육

ECM2.0 기반 통합정보관리 솔루션의 리더 세피안테크놀러지

ExtJSclient-side-JavaScript

framework


목차o Javascript 상속o ExtJS 의 기본 구조o 이벤트o Template Methodo Class 확장o Grid 만들기o Debugging


1. JAVASCRIPT 상속※ 기본 Javascriptvar obj = {}; obj.x = 10; obj.y = 20;var obj = new Object; obj.x = 10; obj.y = 20;function Foo() {

this.x = 10;this.y = 20;

}var obj = new Foo;

상속 방식- ChildClassName.prototype = new ParentClass();

생성자 재설정-

ChildClassName.prototype.constructor=ChildClassName

자녀 클래스에서 부모클래스 재정의해서 호출 .- Function.call()

※ Prototypefunction Bar() {

this.z = 30;}Bar.prototype = new Foo; Bar.prototype.constructor =

Bar;var obj = new Bar

상속 ?


2. EXTJS 기본구조 (1)

※ 간단한 페이지 사용하기

Ext.onReady(function() { alert(“Test!");

});

o Ext.onReady 는 반드시 가장 처음으로 호출되는 메소드 .o 모든 DOM 의 로딩이 완료되어야 이 메소드가 자동으로 호출됨 .o 페이지 내 모든 엘리먼트에 접근이 가능 .


2. EXTJS 기본구조 (2)※ 클래스 상속 및 복잡한 페이지에 용이

BasicInfo_Main = function(){return{

init:{ 내용 ~}}}();Ext.EventManager.onDocumentReady(BasicInfo_Main.init, BasicInfo_Main, true);

※ Ext 에서 클래스 상속은 다음과 같이 정의한다 .Ext.MyClass = function(){

~~~ 내용 ~~// base 클래스 기능을 유지하기 위해 super 클래스 호출Ext.MyClass.superclass.constructor.call(this , arguments);

};Ext.extend(Ext.MyClass , Ext.grid.GridPanel, {// 정적 변수 추가 할 수 있음 . 동일하게 적용됨 .

functionName: function(v){return v;

}});


※ 방식- Dom Events- Javascript Events- Ext.Util.Observable 의 확장 .

1. Dom 방식var myDiv = document.getElementById('myDiv');

Ext.onReady(function() { var myDiv = Ext.get('myDiv');

});

브라우저간 호환성 문제가 없는 Element 메소드로 DOM 노드 작업 수행 .- CSS 클래스 추가 제거 , 이벤트 핸들러 추가 제거 , - 위치 이동 , 크기 조절 , 애니메이션 , 드래그 앤 드롭

3. 이벤트

DOM 인터페이스 제공 ( 메소드 , 프로퍼티 )- 편리성 , 통합성 , 브라우저간 호환성

Element.get() 메소드내부 캐쉬를 사용- 동일한 객체를 반복 호출 시 빠른 속도 제공 .


Ext.onReady(function() { Ext.get('myButton').on('click', function(){ alert("You clicked the button"); });});

Ext.select('p').on('click', function() {alert("You clicked a paragraph");

});

- DomQuery DOM 선택 라이브러리를 제공 .- Element 인터페이스를 이용할때 자주 사용됨 .- 반환되는 객체는 CompositeElement 로 Element 인터페이스를 통하여 내부 엘리먼트에 접근할 수 있게 해줌 .- 한번에 모든 요소 그룹을 가져 올 수 있습니다 .

3. 이벤트

mybutton


var paragraph = Ext.get(e.target);paragraph.highlight(); Ext.MessageBox.show({

title: 'Paragraph Clicked',msg: paragraph.dom.innerHTML,width:400,buttons: Ext.MessageBox.OK,animEl: paragraph

});

- 객체 리터럴 형식으로 인자 전달 .- 형식 [ 프로퍼티 이름 ] : [ 프로퍼티 값 ]- 장점 - 유연성 . - 아무때나 프로퍼티가 추가 / 삭제 - 순서가 변경되더라도 메소드의 시그니쳐 ( 인자의 개수와 타입 ) 를 변경하지 않아도 됨 .

3. 이벤트


MyPanel = Ext.extend(Ext.Panel, {// 초기 생성 initComponent:function() { ... MyPanel.superclass.initComponent.apply(this, arguments); ... //custom events 추가 this.addEvents('loaded', 'completed'); }, load:function(cfg) { .... // fire loaded event this.fireEvent('loaded', this, cfg); }, complete:function(cfg) { ... // fire completed event this.fireEvent('completed', this, cfg); }});

3. 이벤트


※ Relay Events … var content = new MyPanel({...}); var itemx = … …

// 윈도우 생성과 Content panel 추가 var win = new Ext.Window({

... items : [itemx, …, content ] });

// contents panel 로 부터 윈도우에 loaded, completed event 요청함 win.relayEvents(content, ['loaded', 'completed']);

// 사용자 이벤트 처리를 발생시킴 . win.on( { 'loaded' : function (panel, obj) {...}, 'completed' : function(panel, obj) {...}, scope : this });

3. 이벤트


※ 네임스페이스가 존재하는지 체크 .

if (!App) App = {}; if (!App.form) App.form = {}; if (!App.data) App.data = {};

// 이름이 존재하지 않는다면 네임스페이스에 등록함 .Ext.namespace('App', 'App.form', 'App.data'); // App.form 패키지에 SampleForm 클래스픞 정의해서 사용할 수 있음 .App.form.SampleForm = Ext.extend(Ext.form.FormPanel, { initComponent: function() {

... App.form.SampleForm.superclass.initComponent.call(this); }});

4. Namespace


5. Template Method

- 컨테이너의 레이아웃 관리자에 의해 수행 .- 기본 클래스에서 구현 .- Overridde 되지 않아도 됨 .

- onRender - afterRender - onAdded - onRemoved - onShow - onHide - onDisable - onEnable - onDestroy


6. 클래스 확장 ?

※ Component- 다른 Control 이 필요 없는 경우 .- Html 형태로 되어있는 경우 .

※ BoxComponent- 레이아웃 관리자에 의해 관리되는 사이즈 , 위치 변경 .

※ Container- UI 제어 (onBeforeAdd, onAdd, onRemove, onLayout)

※ Panel- 머리글 , 꼬리글 , 도구모음 등의 인터페이스 컨트롤이 필요한 경우- (onCollapse, onExpand)


7. Grid 구현Ext.onReady(function() {

// 첫 라인은 그리드에 보여줄 테스트 데이터를 생성 .// 실제 프로젝트에서는 이 부분에서 데이터 베이스나 웹서비스 같은 동적인 소스에서 데이터를 가져 옮 .var myData = [

['Apple',29.89,0.24,0.81,'9/1 12:00am']];

// 데이터 리더를 생성// 그리드내 데이터 스토어에 담기 위해 데이터를 어떻게 읽어 들이고 레코드로 변환할지 설정 .// 다양한 데이터 타입을 위한 각각의 리더 클래스가 존재 .var myReader = new Ext.data.ArrayReader({}, [

{name: 'company'},{name: 'price', type: 'float'},{name: 'change', type: 'float'},{name: 'pctChange', type: 'float'},{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

]);


Reader 참조

- HttpProxy: 같은 도메인일 경우- ScriptTagProxy: 다른 도메인일 경우- MemoryProxy: 메모리에 있는 데이타

SimpleStore (Json, Grouping)Store

Proxy 없음 HttpProxy, ScriptTagProxy, Memo-ryProxy

Reader ArrayReader JsonReader, XmlReader, ArrayReader

LoadMe-hod

store.loadData(data)

store.load()

Extend Ext.data.Store Ext.data.Store


// 그리드 위젯을 생성하는데 아래와 같은 설정 값들을 전달 .// 새로운 데이터 스토어 , 생성한 테스트 데이터와 리더가 설정 되어 있음 .var grid = new Ext.grid.GridPanel({

store: new Ext.data.Store({data: myData,reader: myReader

}),

// columns 에 컬럼 모델 정의columns: [

{header: "Company", width: 120, sortable: true, dataIndex: 'company'},

{header: "Price", width: 90, sortable: true, dataIndex: 'price'},{header: "Change", width: 90, sortable: true, dataIndex:

'change'},{header: "% Change", width: 90, sortable: true, dataIndex:

'pctChange'},{header: "Last Updated", width: 120, sortable: true,

renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}

]

7. Grid 구현


// 기타 그리드의 기능 설정

viewConfig: {forceFit: true

},renderTo: 'content',title: 'My Grid',width: 500,frame: true

}); // SelectionModel 을 사용해 첫 번째 행을 하이라이트 시킴

grid.getSelectionModel().selectFirstRow();});

7. Grid 구현


7. Grid 구현o Row EventRow 에서 오른쪽 마우스 클릭했을 경우This.grid.on(‘rowcontextmenu’,this.getRowData, this);

Row 클릭 했을 경우This.grid.on(‘rowclick’, this.getRowData, this);

Row 더블클릭했을 경우This.grid.on(‘rowdblclick’,this.getRowData, this);

Row 가 선택됐을 경우This.grid.on(‘rowselect’, this.rowSelect, this);

레코드 가져오는 방법Datastore.getAT(Row 의 Index Number) – 데이터 스토어의 인덱스에서 가져오는 방법SelectionModel.getSelected() – RowSelectionModel 이나 CellSelectionModel 에서 가져오는 방법

레코드에서 해당 데이타셋 가져오기Record.data. 가져올 DataIndex TextRecord.get(‘ 가져올 DataIndex 텍스트 )


8. Debugging

- IE Explorer debugger for 8.x 이후 F12 개발자 도구

- MS Visual studio

- Firebug for firefox

- 기타 다양한 디버깅 툴이 존재함 .

oDemo View

Extjs교육

Documents

Transcript of Extjs교육