ExtJS를 실무에 적용하고자 기술검토를 통해 파일럿 프로그램을 개발하고, 실무(회사 솔루션)에 적용해본 지 약 2개월이 지나가고 있다. 그간 개발하면서 ExtJS에 대해 느껴왔던 점에 대해 기록해본다.

제일 처음에는 GWT(Google Web Toolkit)에 기반한 GXT를 내려받아 적용해 봤는데 아래와 같은 문제점이 있었다.

GXT 적용기

1. 소스 변경 후 화면을 통해 바로바로 확인하는 웹 프로그램의 특성상 기본적으로 JavaScript로의 컴파일을 통해 화면을 생성하는 GXT는 일반 JSP 작업보다 생산성면에서 불편했다. - 물론 이것은 GWT 기반이기 때문에 피할 수 없는 문제다.
(특히 내 컴터의 512MB + 256MB 메모리로는 이클립스와 같이 돌리기에는 쿨러돌아가는 소리가 너무 크다 ㅠㅠ)

2. 화면 레이아웃을 잡는데 너무 많은 고통이 수반된다.
GXT에서 모든 화면 레이아웃은 Layout 클래스를 이용해 만들어야 한다. 예전에 Swing이나 AWT 이용해 화면 UI를 만들어봤던 나도 이 작업은 너무 어렵고 힘들었다. 복잡한 화면을 표현해야 하는 웹 프로그램의 특성 상 어찌보면 이 부분은 GXT를 이용해 개발해야 할 경우 넘어야할 가장 큰 산인듯 싶다.

3. 크로스 브라우징 - 국내 웹 개발자에게 늘 삽질의 은공(?)를 제공하는 IE가 항상 문제다. 파이어폭스하고 크롬에서는 정상으로 보이나 IE는 6, 7, 8 버전별로 모양새가 다 다르게 나온다. ㅠㅠ  CSS 삽질이 필수로 요구된다.

도입하는데 부닥친 가장 큰 문제는 크게 위 3개로 요약된다. 기타 자잘한 문제는 GWT가 기본적으로 가지고 있는 문제이므로 별도 언급하지는 않겠다.

ExtJS 적용기

ExtJS는 그 자체가 JavaScript 이기 때문에 GXT가진 1번 문제는 해결된다.
아울러, 화면 레이아웃은 JSON(JavaScript Object Notaion) 형식으로 꾸며나가면 되는데 초기 학습비용은 높은 편이나 몇개의 산을 넘다보면 익숙해지는데 오랜 시간이 걸리지는 않는다.

역시나 크로스 브라우징 문제는 ExtJS에서도 발생했다. 그러나 몇가지 수동으로 패치작업을 해주면 IE에서도 원하는 모양으로 표시되도록 할 수 있는데 배포사에서 이 부분을 좀 신경써 주었으면 좋겠다. (ExtJS 상용 라이센스를 구입하는 사람도 있으므로 ....)

다음은 ExtJS에 익숙해지기 위한 필수 지식이다.

1. JavaScript - 너무 당연하다.
2. JSON - ExtJS에서는 거의 대부분의 코딩작업을 JSON 형식으로 선언하며, 심지어 서버에서 처리한 결과 조차도 JSON으로 받아 화면에 표시하게 된다. (물론 사용자가 선택할 수는 있다.)
3. ExtJS API - 항상 곁에두고 참조해야 한다. 특정 객체의 프로퍼티, 메소드, 이벤트 등을 알고 사용하기 위해서는 어쩔 수 없다. Java 프로그래밍 할때의 Code Insight 기능은 JSON 형식을 사용하는 ExtJS에서 한계가 있기 때문에 API는 개발을 마칠때까지 수시로 참고해야 된다.

다음은 내가 느꼈던 ExtJS의 장점이다.

1. 초기 학습비용은 매우 높은 편이나 익숙해지면 개발생산성이 약 2배이상 향상된다.
2. 지저분한 UI 코드가 사라지고, 장문의 HTML 코드를 이용하는 일이 거의 없어진다.
3. ExtJS 배포 컴포넌트 만으로 다양한 UI를 구현하는데에는 한계가 분명히 있다. 그러나, 수많은 이용자들이 공개한 다양한 플러그인을 사용한다면 웬만한 UI 나 업무처리를 구현하는데 문제가 없다.

결론

시간이 충분치 않거나 팀원들의 학습능력이 받쳐주지 않을 경우 함부로 ExtJS를 도입하지 말 것을 권장한다. Java프로그래밍을 잘 하는 것과 JavaScript를 잘하는 것은 전혀 별개의 영역이다.
그러나, 개발시간에 여유가 있고 참여하는 팀원들의 지적욕구가 충만하다면 ExtJS는 충분히 도입할 만한 가치가 있는 UI 기술이다.

초기 학습비용이 다른 기술에 비해 높은 편이지만 일단 JSON 형식과 API에 익숙해지면 기존에 MVC 프레임웍의 View 기술을 대체할만한 매력이 충분한 녀석이다. 특히 UI 개발시간이 단축된다는 점과 지저분한 UI 코드가 사라진다는 점이 특히 매력적이다. (노파심에 언급하자면 ExtJS는 Model, Controller 영역하고는 무관한 기술이다)

자, 당신의 선택은 무엇인가?


※ 참고 : 회사에서 적용한 ExtJS 기반의 솔루션 기술 일람

UI단 : ExtJS, JSP(with taglib, Sitemesh)
Server단 : Spring, iBatis (MVC 컨트롤러는 ExtJS에 맞게 별도로 개발함)
WAS : Tomcat 5.X
DB : Oracle 10g XE
기타 : Jakarta commons, Log4j 외

'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS - Collpased된 패널의 타이틀 보여주기  (0) 2009.05.20
ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
split 설정이 true된 패널의 경우 collapsible 옵션을 true로 주어서 화면에 보여주는 것을 토글(toggle)시킬 수 있다.
var helpPanel = new Ext.Panel({
    id          : 'help-panel',
    title       : '도움말',
    region      : 'south',
    height      : 250,
    autoScroll  : true,
    collapsible : true,
    collapsed   : true,
    split       : true
});

그런데 이 패널을 collpased 시키면 기존 설정된 타이틀이 없어지게 된다. 아래 그림을 보자.



위 그림에서 ②번 그림과 같이 collpased된 패널의 타이틀이 없어졌다.
③번 그림이 이를 해결한 그림인데 아래 코드를 해당 스크립트 파일에 정의해주면 된다.

Ext.layout.BorderLayout.Region.prototype.getCollapsedEl =
    Ext.layout.BorderLayout.Region.prototype.getCollapsedEl.createSequence(function() {
    if ((this.position == 'north' || this.position == 'south') && !this.collapsedEl.titleEl) {
        this.collapsedEl.titleEl = this.collapsedEl.createChild(
            {
                style : 'color:#15428b; font:12px; padding:2px 5px;',
                cn    : this.panel.title
            }
        );
    }
});

경우에 따라 이 타이틀을 이미지로 바꾸어도 될 것 같다.

'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS 실무 적용기  (1) 2009.06.16
ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
파이어폭스나 크롬에서는 문제없는데 IE에서만 발생하는 오류다. (아래 ComboBox에 이어 두번째 시리즈가 되었네)

일반 radio 컴포넌트를 사용할 경우는 문제없는데 radiogroup을 이용할 경우 아래와 같은 문제가 발생한다.


아래는 위 첨부파일에 해당하는 스크립트 코드다.
{
        xtype       : 'radiogroup',
fieldLabel  : '첨부파일', 
columns     : [70, 100],
        items       : [
{boxLabel: '사용', name: 'useFile', inputValue: 'Y'},
{boxLabel: '미사용', name: 'useFile', inputValue: 'N'}
]
}

해결방안은 아래와 같다.
.x-form-radio-wrap { white-space: nowrap !important }

이제 제대로 나온다.

'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS 실무 적용기  (1) 2009.06.16
ExtJS - Collpased된 패널의 타이틀 보여주기  (0) 2009.05.20
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
파이어폭스나 크롬에서는 문제없는데 IE에서만 발생하는 오류다. 
 
위 화면에서 우측의 수정 아이콘 클릭했을 경우 

위와 같이 그리드가 이동하면서 하단에 수평 스크롤바가 생긴다.

IE 디버그 툴로 해당 부분의 CSS를 살펴보았다.

해당 그리드패널을 감싸는 div 영역의 넓이가 10000px로 지정되어 있다.

아래와 같이 CSS를 수정해준다.
.x-grid3-header-offset{ width:auto; position: relative; }

ExtJS를 이용해 IE에서 개발한 내용을 확인할 경우 이런 경우가 종종 생기는데, 이럴때마다 웹개발 때려치고 Delphi로 돌아가고 싶은 마음이 든다.

'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS - Collpased된 패널의 타이틀 보여주기  (0) 2009.05.20
ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
ExtJS 3.0 확장타입(xtype) 목록  (0) 2009.04.27
ComboBox에서 선택한 값의 key 정보가 넘어가지 않고 value 정보가 넘어가는 경우가 있다.
이럴때에는 아래와 같이 hiddenName을 삽입해줘야 한다.

{
xtype        : 'combo',
fieldLabel  : '처리기간 산정기준',
name        : 'dealStdCd',
hiddenName  : 'dealStdCd',
store        : new Ext.data.Store({
url: CTX_PATH + '/zebra/app/commons/ajax_codeList.jsp',
baseParams : { cmd:'codeList', grpCd:10 },
reader: new Ext.data.JsonReader({
root: 'datas'
}, ['id', 'displayName']
), 
autoLoad: true
}),
valueField:'id', displayField:'displayName', 
triggerAction:'all', mode:'local', editable:false
}



'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
ExtJS 3.0 확장타입(xtype) 목록  (0) 2009.04.27
ExtJS PDF 서적  (0) 2009.04.22
ExtJS를 이용해 개발하다보면 필연적으로 만나게 되는 자바스크립트 에러 !

파이어폭스에서는 부가기능으로 설치가능한 Firebug나 Web developer tool이 있어 별 문제가 없지만, IE에서는 정말 대책이 없다. ExtJS를 IE 기반에서 아래 소개하는 도구 없이 개발한다면 KTX를 이용하지 않고 걸어서 서울부산을 왕복하는 용자(용기있는 자) 되겠다.

1. MS 스크립트 디버거
MS에서 무료로 배포하는(OS 정품 사용자에게만) 도구로 아래에 소개하는 녀석과 함께 구동하면 매우 좋다.

2. Companion.js
Firebug에서 스크립트 디버깅 기능을 IE에서 사용할 수 있도록 해준다.

주의 : 1번, 2번 순서대로 설치할 것.

나중에 재설치할 경우의 귀차니즘으로 인해 관련된 파일을 첨부파일로 올려놓는다. 첨부파일 중 WGA....exe 파일은 정품사용자를 확인하는 플러그인이다.

저작권 신고로 인해 관련파일을 링크로 대체한다.

WGAPluginInstall.exe - http://www.downloadstwist.com/wgaplugininstall/
install-companionjs-v0.5.exe - http://www.my-debugbar.com/wiki/CompanionJS/HomePage
scd10en.exe - http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99


'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
ExtJS 3.0 확장타입(xtype) 목록  (0) 2009.04.27
ExtJS PDF 서적  (0) 2009.04.22 
출력해서 수시로 참조해야 할 듯 ....



xtype            Class

-------------    ------------------

box              Ext.BoxComponent

button           Ext.Button

buttongroup      Ext.ButtonGroup

colorpalette     Ext.ColorPalette

component        Ext.Component

container        Ext.Container

cycle            Ext.CycleButton

dataview         Ext.DataView

datepicker       Ext.DatePicker

editor           Ext.Editor

editorgrid       Ext.grid.EditorGridPanel

flash            Ext.FlashComponent

grid             Ext.grid.GridPanel

listview         Ext.ListView

panel            Ext.Panel

progress         Ext.ProgressBar

propertygrid     Ext.grid.PropertyGrid

slider           Ext.Slider

spacer           Ext.Spacer

splitbutton      Ext.SplitButton

tabpanel         Ext.TabPanel

treepanel        Ext.tree.TreePanel

viewport         Ext.ViewPort

window           Ext.Window



Toolbar components

---------------------------------------

paging           Ext.PagingToolbar

toolbar          Ext.Toolbar

tbbutton         Ext.Toolbar.Button        (deprecated; use button)

tbfill           Ext.Toolbar.Fill

tbitem           Ext.Toolbar.Item

tbseparator      Ext.Toolbar.Separator

tbspacer         Ext.Toolbar.Spacer

tbsplit          Ext.Toolbar.SplitButton   (deprecated; use splitbutton)

tbtext           Ext.Toolbar.TextItem



Menu components

---------------------------------------

menu             Ext.menu.Menu

colormenu        Ext.menu.ColorMenu

datemenu         Ext.menu.DateMenu

menubaseitem     Ext.menu.BaseItem

menucheckitem    Ext.menu.CheckItem

menuitem         Ext.menu.Item

menuseparator    Ext.menu.Separator

menutextitem     Ext.menu.TextItem



Form components

---------------------------------------

form             Ext.FormPanel

checkbox         Ext.form.Checkbox

checkboxgroup    Ext.form.CheckboxGroup

combo            Ext.form.ComboBox

datefield        Ext.form.DateField

displayfield     Ext.form.DisplayField

field            Ext.form.Field

fieldset         Ext.form.FieldSet

hidden           Ext.form.Hidden

htmleditor       Ext.form.HtmlEditor

label            Ext.form.Label

numberfield      Ext.form.NumberField

radio            Ext.form.Radio

radiogroup       Ext.form.RadioGroup

textarea         Ext.form.TextArea

textfield        Ext.form.TextField

timefield        Ext.form.TimeField

trigger          Ext.form.TriggerField



Chart components

---------------------------------------

chart            Ext.chart.Chart

barchart         Ext.chart.BarChart

cartesianchart   Ext.chart.CartesianChart

columnchart      Ext.chart.ColumnChart

linechart        Ext.chart.LineChart

piechart         Ext.chart.PieChart



Store xtypes

---------------------------------------

arraystore       Ext.data.ArrayStore

directstore      Ext.data.DirectStore

jsonstore        Ext.data.JsonStore

simplestore      Ext.data.SimpleStore      (deprecated; use arraystore)

store            Ext.data.Store

xmlstore         Ext.data.XmlStore

'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
ExtJS PDF 서적  (0) 2009.04.22
GWT에서 ExtJS로 전환하는 와중에, 이건 뭐 전체적인 개념은 같더라도 코딩 방식이 너무 상이하다.
특히 클로저(Closure)[각주:1] 개념은 자바 프로그래머에게 정말 생소한데, 이거 모르면 ExtJS 소스 분석하기 너무 힘들다. (참고로 Java에서는 버전 8 에서나 클로저 개념이 도입될 가능성이 농후 하다)

관련 서적이 없나 구글링중에 찾은 관련 서적 !! 여차저차 구해서 지금 열심히 출력중이다. ㅋㅋ

http://www.packtpub.com/learning-ext-js/book
£22.49 (한화 약 4만원) -> 아마존 주문 시 항공배송료 포함하면 5만원 훌쩍 넘는다.

참고로, ExtJS in Action (http://www.manning.com/garcia/) 이 책은 2009년 12월경에 책으로 출간될 예정이며,
현재 $27.50 가격에 MEAP 에디션으로 5장까지 살펴볼 수 있다. (전체 14장)
현재 안정화가 진행중인 ExtJS 3.0 을 반영한다고 하니 이것도 구해봐야 할 것 같다.

  1. 함수의 인자로 오브젝트 외에 함수 그 자체(코드 블럭)를 넘긴다. 참고 : http://blog.morrisjohns.com/javascript_closures_for_dummies [본문으로]

'자바스크립트 > ExtJS' 카테고리의 다른 글

ExtJS - IE에서의 radiogroup 표시 오류  (0) 2009.05.19
ExtJS - IE에서의 EditorGridPanel 오류  (0) 2009.05.19
ExtJS - ComboBox에서 Key값 submit이 안될경우  (0) 2009.05.19
IE Javascript debugger  (0) 2009.05.18
ExtJS 3.0 확장타입(xtype) 목록  (0) 2009.04.27

+ Recent posts

티스토리툴바