Ext JS와 비교를 위해, jQuery로 비슷한 걸 만들어 본다. 필요한 건 대략 아래와 같다.
- layout
- tab
- grid
- window + form
하나씩, 찾아보자.
1. layout
- Ext JS의 layout, viewport와 유사한 기능
- north, west, center, east, south 영역
- 뭐, 그럭저럭, 쓸 만 하다.
2. 탭 (tab)
http://jqueryui.com/demos/tabs/
- 테마(Theme) 설정에 따라, 컬러와 모양이 확 달라진다.
- 위의 것은 기본 테마인, Theme: UI lightness
- 아래 것은, Theme: Smoothness
http://flowplayer.org/tools/tabs.html
- 찾아보니, 좀 다른 것도 있다. 좀더 화려한 느낌이다.
3. grid
3.1. jqGrid
- Ext JS와 비교해서, 다소 불편.
- pager : 서버에 전달하는 파라미터, 영 신통치 않음. page, rows, sidx, sord. 서버에서 start, limit를 다시 계산해야 하는 번거로움.
- json 데이터를 뽑는 형식, 디폴트 형식이 아주 불편. colModel에 있는 것만 뽑을 수 있고, 순서도 지켜줘야 함.
- 좀더 자유롭게 뽑으려면, repeatitems: false 옵션으로 jsonReader를 재설정해줘야 함.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
- 기본 출력형식도 영 꾸짐. jQuery의 특성, 기본은 꾸지고, 보기 좋게 하려면, css 손질을 해줘야 함. 그 대신, css 손질은 쉬운 편.
- Ext JS의 renderer와 유사한 기능을 하는 formatter 있슴. custom formatter 제작 가능. 컬럼의 출력형식 조정 가능.
function myformatter ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}
- tab 에 grid를 붙이니까, 모양이 영 엉성하다. Ext JS에서는 tab의 title 부분이 싹 사라지고, grid의 title이 그 자리에 쏙 들어찼는데, 여기선, 영, 자기 자리들을 모두 굳건히 지키느라, 뭔가 착 달라붙어서 빈틈을 메워주는 느낌이 없다.
jqGrid + tab 조합
Ext JS, grid + tab 조합
3.2. flexigrid
http://www.flexigrid.info/ 좀더, 화려하고 정제된 기능. 얼핏 보면, Ext JS 닮았다. 툴바 기능. 검색기능.
- 좀 더 뜯어보니, 약점이 많다.
- json 포맷이 한 가지 밖에 없슴. jsonReader 재설정 기능 없슴. 무조건 데이터를 맞춰서 colModel에 뽑아야 함.
- colModel에 hide: true 속성이 있긴 하지만, 잠깐 숨기는 정도의 기능
- formatter 기능 설정이 안보임. 없나?
- 최종 변경일이 Jul 2008. 그 이후엔 업그레이드를 안하고 있는 듯.
3.3. 기타 grid
http://php-team.blogspot.com/2009/05/10-jquery-datagrid-plugins.html Grid Plugin 비교 설명
- 아무리 봐도, Ext JS의 Grid 만한 녀석은 없다.
- jQuery의 장점인 style, structure, behavior 분리가 오히려 어떤 점에서는 약점이 되기도 하는 느낌. 잘 만들어진 컴포넌트 느낌이 나질 않는다.
4. window + form
이 부분은, 나중에, 간단하게, 링크만 남겨둔다.
- http://ui.jquery.com/
- http://malsup.com/jquery/form/
- http://code.google.com/p/jquery-keyfilter/
- http://code.google.com/p/jquery-numberformatter/
5. 참고자료
- http://cloudzdesign.tistory.com/45 위의 링크들을 참고한 문서.
[출처] [jQuery] layout, tab, grid|작성자 슬렁슬렁
