From Sencha - Learn

지난 몇 개월간 저는 ExtJS 라이브러리내의 컴포넌트들의 사용법을 탐구했습니다. 수많은 시행착오와 오랜 기간 동안의 노력 끝에 라이브러리에 대한 많은 이해와 구현방법을 터득하게 되었으며 이제 가장 쉬운 방법으로 여러분들과 공유를 하고자 합니다. 이렇게 함으로서 여러분들은 제가 겪었던 고생을 하실 필요가 없을 겁니다. 이 시리즈들은 여러분들이 자신만의 데이타 그리드를 만들 수 있게 해주며 개별 파트로 나누어서 설명 합니다.

여기에서는 ExtJS 라이브러리 내에서 제공되는 기능이 아닌 서버 측의 페이징 쿼리에 대해서는 언급하지 않습니다. 참고로 저의 홈페이지인 Cutter's Crossing 에 ColdFusion 으로 만든 예제를 보실 수 있습니다. 이 튜토리얼을 진행하기 위해서 여러분은 자신이 선택한 서버 측 언어에서 페이징 쿼리를 직접 구현해야 합니다.

렌더러, 무엇에 쓰는 물건인고?

서버에서 가져온 모든 페이징 쿼리 결과가 여러분이 원하는 형태로 화면에 표기 되지 않았을 겁니다. 저는 여러분들에게 아주 간단한 예제를 보여드릴 예정인데, boolean 값을 설정 해봅시다. 렌더러 함수를 작성해보는 것부터 시작합시다. 쿼리 컬럼에는 boolean 값(bIsActive)이 사용되는데 1 또는 0을 리턴 합니다. 그리드의 표시여부를 Yes 또는 No로 설정 하고 싶다면 컬럼모델 정의영역에 직접 함수를 선언할 수 있습니다:

...
     ,{
        header:'Active',
        dataIndex:'bIsActive',
        renderer:function(value){
           return (value == 1)?'Yes':'No';}
        }
     ...

쉽죠? 하지만 이렇게 하면 재사용할 수가 없죠. 그래서 함수를 따로 선언하고 컬럼용 렌더러로 함수를 등록합니다. 사실 지금 이 부분이 본 튜토리얼의 무게 중심은 아니지만 많은 예제들에서 이러한 방식을 사용하므로 여러분들에게 설명을 해드리는 것이고 저는 이 방식이 올바른 사용법이라고 생각합니다(만약 더 좋은 방법을 알고 있다면 저에게 알려주시기 바랍니다).

렌더러 함수는 기본적으로 최소 1개의 인자를 갖는데, 이것은 렌더링 될 셀의 값 입니다. 여러분은 명시적으로 렌더러를 호출할 필요가 없는데 함수가 어떻게 정의 되었나 에 따라 렌더러에 전달되는 인자가 달라 집니다. Yes/No로 구성된 간단한 boolean 값 전달이 가장 중요한 부분인데, 아래와 같이 렌더러 함수를 정의하고 등록시킬 수 있습니다:

function renderBoolean(value){
     return String.format("{0}",(value==1)?'Yes':'No');
}
 
// And a redefinition of of the renderer in the ColumnModel
     ...
     ,{
        header:'Active',
        dataIndex:'bIsActive',
        renderer:renderBoolean
     }
     ...

보셨나요? 컬럼모델 내의 렌더러를 설정을 하는 부분에 괄호가 없지요. 어떠한 인자도 명시적으로 전달되지 않는데, 이 부분은 ExtJS 프레임워크가 알아서 처리 합니다. 이것 말고 더 많은 기능을 제공하는데, 앞에서 만들어본 데이터스토어내의 두 개 컬럼에 사람의 이름(vcFirstName 과 vcLastName)이 저장되어 있습니다. 이 두 개의 값을 연결시키고 싶다면 반드시 레코드 전체가 필요하겠지요. 걱정하실 필요 없습니다. 살짝 만 고치면 되거든요:

function renderName(value,p,r){
     return String.format("{0} {1}", value, r.data['vcLastName']);
}
// Combine our 'name' columns into one
     ...
     ,{
        header:'Name',
        dataIndex:'vcFirstName',
        renderer:renderName
     }
     ...

세 개의 인자가 있는데 하나는 사용되지 않습니다. 물론 이번 예제에서 사용하지 않는다는 것이지요, 하지만 이 두 번째 인자 없이 세 번째 인자(데이터레코드)를 렌더러에 넘길 수 없기 때문에 두 번째 인자는 없어서는 안됩니다. 그럼 두 번째 인자가 도대체 무엇이냐고요? 아주 좋은 질문입니다. 두 번째 인자는 값에 대한 컨테이너의 엘리먼트 객체라고 저는 명백히 말씀 드리지만 뭐, 제 말이 틀릴 수도 있습니다. 지금 상황에서는 이게 맞는 답인데 다음 튜토리얼에서 아이템 렌더러에 대해 좀더 설명해드리겠습니다.

자바스크립트에서 변수 바인드를 하는 구문인 String.format() function,{[value]} 를 주의 깊게 살펴보시기 바랍니다. 여기서 함수의 첫 번째 인자인 숫자는 배열의 위치를 지정하는 값으로 사용되는데 0부터 시작하며 인자로 건네 받은 모든 변수의 문자열을 포맷팅(formatting) 할 수 있게 해줍니다

여기까지가 렌더러의 quick down과 지저분한 부분입니다. 요번에는 소스코드 다운로드를 제공하지 않지만 이 샘플 코드를 기존 코드에 추가하는 작업을 어렵지 않습니다. 여러분은 훨씬 더 복잡한 렌더러 함수를 만들 수 있을 것이고 이 문서가 좋은 시작점이 될 겁니다.
(주: quick down은 자동변속기 차량에서 강한 가속을 얻기 위해 사용하는 테크닉인데 kick down이 정확한 단어라고 합니다)

• Ext Programmer's API Documentation
• Ext User Forums

This page was last modified on 2 November 2007, at 07:30. This page has been accessed 5,401 times.