ExtJS 시작하기

ExtJs란

ExtJs는 웹애플리케이션을 만들기위한 client-side-JavaScript framework이다. JackSolocum이  Yahoo! User Interface (YUI) library의 확장으로 만들기 시작했으며 Yui-ext란 Project명으로 빠르게 성장했다.

라이센스

ExtJS는 개발목적의 오픈소스로 제공되는 LGPL 라이센스와  로얄티프리 커머셜 라이센스로 구분된다.( licensing page )
상업용 라이센스는 SVN 접속이 허락되며 전화/팩스 및 이메일로 지원을 받을수 있는것이 고작(?)이다.

호환되는 서버 플랫폼

 PHP,Ruby on Rails (Embeded로 지원), .NET, Java 등 여러가지 서버 플랫폼을 지원한다. 사이트( server-side frameworks ) 를 참조하기 바란다.

ExtJS를 사용하기 위해 요구되는 라이브러리

1.0.1a 버전에서는  YUI, jQuery or Prototype/Script.aculo.us. 가 반드시 필요했으나 1.1에서는 Ext adapter를 채택하여 더이상 다른 외부 라이브러리 없이 구동할수 있다. 또한 외부 라이브러리를 사용하고 싶다면 해당 라이브러리 어답터가 별도로 구비되어 있으며 Extension Mode로 제공되는 기타 다른 라이브러리를 참조할수가 있다.

Base Library	Include Order	Get Library
Ext Standalone	ext-base.js ext-all.js (or your choice of files)	http://www.extjs.com/download
Yahoo! UI (.12+)	yui-utilities.js (or your choice of YUI base files) ext-yui-adapter.js ext-all.js (or your choice of files)	http://developer.yahoo.com/yui/
jQuery (1.1+)	jquery.js jquery-plugins.js // required jQuery plugins ext-jquery-adapter.js ext-all.js (or your choice of files)	http://jquery.com/ http://docs.jquery.com/Plugins
Prototype (1.5+) / Scriptaculous (1.7+)	prototype.js scriptaculous.js?load=effects (or whatever you want to load) ext-prototype-adapter.js ext-all.js (or your choice of files)	http://www.prototypejs.org/ http://script.aculo.us/

3-party adapters와의 호환시 이슈사항

• jQuery에서의 애니메이션기능(하이라이팅기능과 같은) 은 다음 사이트를 참조하라. References: 1, 2
• DatePicker와 같은 jQuery버그를 해결하는 방안 References: 1, 2

에러상황에 따른 대처

• 최대한 사용하는 버전의   API documentation. 를 이용한다.
  
• 최신의 버전으로 유지하고 해당 사이트를 항상 방문해서 release나 bugpatch상황을 주시한다.
  
• 브레이스 ( { )나 null을 리턴하는 경우 캐리지 리턴값을 주의한다.  아래와 같이 return 뒤에 한줄을 띈 ( { )는 에러를 발생시킨다. (헉~ 자바스크립트 포매터가 위험하겠군...)
  

var myExample = function()

    {

      return

      {

        foo: 'bar',

        boo: 'far'

      }

    };

위의 코드는 아래와 같이 작성해야 한다.

var myExample = function()

    {

      return {

        foo: 'bar',

        boo: 'far'

      }

    };

만일 여의치 않다면 다음과 같이 대처한다.

• 개발시에는 ext-all-debug.js 를 사용하여 해당 소스 추적이 쉽게 한다. 단 운영시에는 ext-all.js로 obfuscated된 버전으로 사용한다.
• 되도록이면 스크립트 디버거를 사용하도록 한다.
  Firefox Firebug : 사용법(  How-to: using Firebug to debug your script  )
  IE Companion JS
  
• http://blog.naver.com/techbug 사이트에서 확인가능 ^^;

다른 URL혹은 domain이 틀린 사이트에서 데이타를 가지고 오고 싶을때

아래와 같이 HttpProxy보다는 ScriptTagProxy를 사용한다.

var proxy = new Ext.data.HttpProxy({

        url: '/DoSearch.php'

    });

 

//  Add the HTTP parameter searchTerm to the request

    proxy.on('beforeload', function(p, params) {

        params.searchTerm = searchValue;

    });

Hidden Field 표시하는법

See http://extjs.com/forum/showthread.php?t=11698#2 or http://extjs.com/forum/showthread.php?t=6710#2

그리드의 셀에 클릭이벤트 핸들러 사용하는법(가장 많이 헷갈리고 많이 사용하는 것)

function(grid, rowIndex, columnIndex, e) {

        var record = grid.getStore().getAt(rowIndex);  // 레코드의 Row를 가져온다.

        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // 컬럼의 필드명을 가져온다.

        var data = record.get(fieldName);

    }

Ajax로 불러온 마크업중의 스크립트가 실행되지 않을때

Ext.Updater.defaults.loadScripts나  Updater.update 메쏘드나 Element.update 메쏘드 사용

그리드의 Row를 각각 틀리게 표현하고 싶을때 (getRowClass를 사용한 expander사용)

http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass

load()로 빈 데이타스토어(getCount()==0)를 불러올때

HttpProxy나 ScriptTagProxy와 같이 remote data 를 사용할때  Store.load() 는 비동기로 호출되며 서버블로킹없이 즉시 요청한다. "load" 와 "loadexception"이벤트로 쉽게 작업을 할수 있다. 이후 Grid Data Load에서 설명 ^^

Ext.get으로 컴포넌트 불러올때

Ext.get 는 단지 HTML Element의 객체를 가져온다. 즉, document.getElementById와 같다.
판넬이나 폼판넬등 컴포넌트를 불러올때는 Ext.getCmp를 사용해야 한다.

tree Node에서 아이콘 표시하는법

myNode.appendChild(new AsyncTreeNode({

        text: "A folder",

        iconCls: "folder"

    });

CSS의 class seletor를 이용한다. (CSS 표준을 항상 염두해 둘것....)

.x-tree-node img.folder, .x-tree-node-collapsed img.folder{

    background: url("../images/default/tree/folder.gif");

}

 

.x-tree-node-expanded img.folder {

    background: url("../images/default/tree/folder-open.gif");

}

"Ext is undefined"라고 에러 메세지 뜨면

당근 ext-all.js 파일의 패쓰가 잘못됐으니 확인해야지....쩝..이런것도 적어야 하나..

<script type="text/javasscript" src="/somepath.js"></script>

<script type="text/javascript" src="/somepath.js"></script>

"XX has no properties"라는 에러가 떨어질때

해당 엘리먼트 id값을 찾을수 없다는 얘기다. 아래에서는 id='save-button'를 가진 객체를 찾을수 없다는 얘기다.

// constructors:

var tb = new Ext.Toolbar('toolbar');

 

// creating Element references:

var saveBtn = Ext.get('save-button');

<div id="toolbar"></div>

<input id="save-button" type="button" value="Save" />

extjs.com/s.gif를 계속 찾고 있다면 아래와 같이 한다.

1x1pixel짜리 투명이미지를 절케 표시하고 있다. 잘 해두도록...

Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/aero/s.gif';  // 1.1

Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';  // 2.0

설명서를 잘 읽어보도록...반드시....

익칠이(IE)에서는 안돌아가는데 불여우(FF)에서 잘 돌아갈때

쉼표를 잘 찾아보도록....

testFunc = function() {

    return {

        titlebar: true,                            

        collapsible: true,  // <--- BOOM goes the comma! :D

    }

}

JSLint를 이용하면 쉽게 찾을수 있다.

가끔씩 깨진 화면들이 나올때

이런경우 난감한...문제가 발생할수도 있는데 나의 경우는 전체 화면을 다시 그린적도 있다.. ㅠ.,ㅠ;

반드시 해당 컴포넌트(판넬,폼판넬, 콤보박스, 그리드 판넬)의 ID값을 반드시 입력해 준다. 또한 같은화면에 같은 ID값을 가진 객체가 있는지 반드시 확인한다.

다른 도움을 받고 싶을을 정도로 울고 싶을때

- ExtJS Forum에 들어가 도움을 청해본다. 그리고 Google 신에게 물어본다.  답이 다 있다. 다만 시간이 걸릴뿐이다.

영어 해석은 기본, 중국어은 옵션.. ^^;  

위의 내용만 알면 어느정도 ExtJS를 사용하면서 겪을 문제를 반정도는 해결할수 있다... 나의 경우 그랬으니깐... ㅡ.,ㅡ;

끝.