블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글




국내환경에서 Ajax Library/Framework에서만 제공하는 기본 컴포넌트/위젯으로는 어려운 경우가 많은데 오늘 우연찮게 블로그 유입경로를 보다가 유난히 틀고정 그리드를 찾는 분들이 많아 포스팅한다.
Ext js 의 포럼글에서 우연찮게 찾아 북마킹해 놓은 것이 있어 공개한다. 아래 소스를 조금 수정하여 열고정, 행고정이 되는 그리드 컴포넌트를 만들어 보는것도 좋을듯....






Markup
<html xmlns="http: //www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../lib/ext-3.0.3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="columnLock.css" />
<script type="text/javascript" src="../lib/ext-3.0.3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext-3.0.3/ext-all.js"></script>
<script type="text/javascript" src="columnLock.js"></script>


컬럼모델 config 파일은 다음과 같이 작성한다.
columns: [
    {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company', locked: true},
    {header: "Price", width: 150, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
    {header: "Change", width: 150, sortable: true, renderer: change, dataIndex: 'change'},
    {header: "% Change", width: 150, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],



Ext js 3.0x 이상

Ext js 2.1~ 2.2 버전

























'Scripter > EXTJS' 카테고리의 다른 글

Ext js 틀고정 그리드  (1) 2009.11.15
Ext.Updater 깜빡거림 방지  (0) 2009.05.06
Extjs Core 3.0 Beta 릴리즈  (4) 2009.04.07
Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.11.22 11:05  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다