Ext JS 5 의 작은 위 젯 알 아 보기

Ext JS 5 에서 위 젯 이해
Ext JS 5 에 새로운 'widgetcolumn' 을 도입 하여 격자 의 셀 에 구성 요 소 를 배치 할 수 있 습 니 다.이와 함께 Ext JS 5 에 '작은 부품' 으로 불 리 는 경량급 구성 요 소 를 새로 도입 했다.Ext JS 5 에는 이미 몇 개의 작은 부품 이 포함 되 어 있 으 며, 본 고 는 자신의 작은 부품 을 쉽게 만 드 는 방법 을 알려 줄 것 이다.그 중의 관건 적 인 개념 을 설명 하기 위해 서 글 에서 'ratings' 라 는 간단 한 위 젯 을 만 들 것 입 니 다. 다음 그림 과 같은 작은 위 젯 을 만 들 것 입 니 다.
입문 하 다
Ext. Component 에서 파생 되 는 구성 요소 와 달리 작은 위 젯 은 새로운 기본 클래스 Ext. Widget 에서 파생 됩 니 다.그리고 Ext. Widget 의 파생 류 는 거의 설정 시스템 에 의 해 정 의 됩 니 다.Ext. Widget 은 DOM 요소 가 어떻게 생 성 되 고 DOM 이벤트 와 어떻게 연결 되 는 지 정의 해 야 합 니 다.
과장 하 다
작은 위 젯 에 대해 먼저 DOM 트 리 를 어떻게 정의 하 는 지 고려 해 야 합 니 다. 전형 적 인 방식 은 다음 과 같은 코드 가 어떤 요소 속성 에서 이 루어 지 는 지 입 니 다.

Ext.define('Ext.ux.rating.Picker', {
    extend: 'Ext.Widget',     //... 
    element: {
        cls: 'ux-rating-picker',
        reference: 'element', 
        children: [{
            reference: 'innerEl',
            cls: 'ux-rating-picker-inner', 
            listeners: {
                click: 'onClick',
                mousemove: 'onMouseMove',
                mouseenter: 'onMouseEnter',
                mouseleave: 'onMouseLeave'
            }, 
            children: [{
                reference: 'valueEl',
                cls: 'ux-rating-picker-value'
            },{
                reference: 'trackerEl',
                cls: 'ux-rating-picker-tracker'
            }]
        }]
    },     //...});

대상 element 는 Ext. dom. Helper 규범 을 바탕 으로 DOM 요 소 를 만 들 고 주요 한 추가 기능 은 reference 와 listeners 속성 입 니 다.이 이름 들 은 보기 컨트롤 러 에서 흔히 볼 수 있 는 것 이 고, 작은 부품 에서 해 야 할 일 도 비슷 하 다.Ext. Widget 에 서 는 모든 요소 의 reference 속성 이 속성 값 으로 작은 위 젯 인 스 턴 스 에 캐 시 됩 니 다 (예 를 들 어 element, innerEl 등).
이벤트
상기 element 에 서 는 innerEl 대상 에서 listeners 대상 도 정의 합 니 다.이 감청 은 규범 블록 에서 발생 하 는 요소 에 부가 된다.방법 은 이름 에 따라 작은 위 젯 클래스 에서 찾 습 니 다. 예 를 들 어:

Ext.define('Ext.ux.rating.Picker', {
    extend: 'Ext.Widget',     //... 
    onClick: function (event) {
        var value = this.valueFromEvent(event);
        this.setValue(value);
    }, 
    onMouseEnter: function () {
        this.element.addCls(this.overCls);
    }, 
    onMouseLeave: function () {
        this.element.removeCls(this.overCls);
    }, 
    onMouseMove: function (event) {
        var value = this.valueFromEvent(event);
        this.setTrackingValue(value);
    },

전통 적 인 구성 요 소 를 만 드 는 것 과 비슷 해 보이 지만 초기 화 코드 와 청소 코드 가 부족 한 것 이 분명 합 니 다.Ext. Widget 의 구조 함 수 는 요소 의 생 성 을 처리 하고 그들의 인용 을 추적 하 며 감청 을 설정 합 니 다.이러한 동작 (해당 하 는 소각 방법) 을 제외 하고 Ext. Widget 은 추가 적 인 생명주기 나 관련 비용 이 없습니다.대체 방법 으로 파생 류 는 시스템 이 제공 하 는 config 속성 을 설정 하여 행동 을 정의 할 수 있 습 니 다.설정 시스템 을 이해 할 기회 가 없 는 경우 간단 한 방식 으로 설명 하 겠 습 니 다.
시스템 설정 101
Ext JS 의 핵심 이념 중 하 나 는 '설정 (config)' 속성의 개념 이다.그들 은 처음부터 Ext JS 의 일부분 이 었 다. Ext JS 5 (또는 Sencha Touch 2. x) 에서 만 있 는 것 이 아니 라 프레임 워 크 는 이러한 속성의 체 제 를 규범화 시 켰 다.일반적인 설정 은 다음 과 같 습 니 다:

Ext.define('Ext.ux.rating.Picker', {
    //...
    config: {
        family: 'monospace'
    }
    //...});

상술 한 성명 은 다음 과 같은 핸드폰 코드 와 같다.

Ext.define('Ext.ux.rating.Picker', {
    //... 
    getFamily: function () {
        return this._family;
    }, 
    setFamily: function (newValue) {
        var oldValue = this._family;         if (this.applyTitle) {
            newValue = this.applyFamily(newValue, oldValue); // #1
            if (newValue === undefined) {
                return this;
            }
        }         if (newValue !== oldValue) {
            this._family = newValue;             if (this.updateFamily) {
                this.updateFamily(newValue, oldValue); // #2
            }
        }         return this;
    },     //...});

이런 자동화 처 리 는 주로 다음 과 같은 현저 한 장점 이 있다.

뚜렷 함: 더 적은 코드, 클래스 가 더 읽 기 쉽다

일치 성: 모든 설정 이 같은 행동 을 합 니 다

유연성: 올 바 르 게 실 현 될 때 설정 속성 은 생 성 할 때 만 바 뀌 는 것 이 아니 라 언제든지 바 꿀 수 있 습 니 다 (Ext JS 에서 오래된 설정 속성의 흔 한 한계)

개발 자 는 모든 속성 에 두 가지 관건 을 제공 할 수 있 고 선택 할 수 있 는 방법 이기 도 합 니 다. 예 를 들 어 family 는 apply Family 와 updateFamily (위의 코드 중의 \ # 1 과 \ # 2 곳) 입 니 다.이 방법 들 은 get 이나 set 방법 이 아 닌 비중 있 게 쓴다.
응용 방법 (applier)
응용 방법 으로 개발 자 를 실행 하여 수신 치 를 저장 의 실제 값 으로 변환 하 다.많은 응용 방법 에 있어 서 이것 은 수 신 된 설정 대상 을 바탕 으로 일부 인 스 턴 스 를 만 들 거나 응용 방법 이 한 곳 에서 표준화 내부 표현 형식 으로 이 속성 을 사용 하 는 모든 곳 에서 검 사 를 하지 않도록 하 는 것 을 의미 할 수 있 습 니 다.
설정 속성의 값 이 바 뀌 면 업데이트 방법 을 호출 합 니 다.업데이트 방법의 역할 은 낡은 값 을 새로운 값 으로 바 꾸 는 것 이다.
initConfig -- 가 져 가세 요.
마지막 으로 말 하고 자 하 는 것 은 하나의 종 류 를 끓 는 설정 시스템 에 넣 으 려 면 특정한 점 에서 initConfig 방법 을 사용 해 야 한 다 는 것 이다.Ext. Widget 에 서 는 구조 함수 에서 실 행 됩 니 다.방법 initConfig 는 config 대상 을 받 아들 이 고 클래스 의 성명 이 set, apply, update 방법 을 적절하게 호출 할 수 있 도록 모든 속성 을 처리 합 니 다.이 방법 은 설정 속성 간 의 순서 문 제 를 해결 하기 위해 '적시 (just in time)' 설정 체 제 를 제공 합 니 다. 예 를 들 어 설정 속성의 업데이트 방법 이 다른 설정 속성의 값 이 필요 하 다 면 다른 설정 속성의 get 방법 을 사용 해 야 합 니 다.바 텀 에 서 는 initConfig 가 요청 한 속성 전에 돌아 온 결과 에 따라 set / application / update 방법 을 순서대로 호출 합 니 다.
cachedConfig 를 사용 하여 최적화
작은 위 젯 에 대해 서 는 DOM 을 유지 하기 위해 많은 설정 이 필요 합 니 다.주어진 작은 위 젯 인 스 턴 스 가 모든 기본 설정 값 을 다시 쓸 수 없 기 때문에 처리 할 기본 값 을 캐 시 할 수 있다 면 가장 이상 적 입 니 다.이 설정 들 에 대해 서 는 클래스 를 다음 과 같이 수정 할 수 있 습 니 다.

Ext.define('Ext.panel.Panel', {
    //...
    cachedConfig: {
        family: 'monospace'
    }
    //...});

대부분의 경우 이 설정 들 은 일반적인 설정 과 같 습 니 다.그러나 이 설정 들 을 캐 시 할 때 설정 시스템 은 클래스 가 첫 번 째 인 스 턴 스 를 만 들 때 추가 처 리 를 수행 합 니 다.
일차 실례 화
첫 번 째 인 스 턴 스 의 설정 대상 이 처리 되 기 전에 설정 시스템 은 클래스 의 기본 값 에서 만 초기 화 됩 니 다.이 처 리 는 각종 apply 와 update 방법 을 호출 합 니 다. 이 는 반대로 요소 규범 에 따라 DOM 요소 의 최초 생 성 을 업데이트 합 니 다.family 설정 을 고려 하면 다음 과 같은 업데이트 방법 이 있 습 니 다.

updateFamily: function (family) {
    this.element.setStyle('fontFamily', "'" + family + "'");},

모든 업데이트 방법 은 작은 위 젯 에 DOM 의 기본 상 태 를 설정 하 는 데 도움 이 됩 니 다.기본 값 으로 설정 되면 after Cached Config 방법 을 사용 합 니 다.이 방법 은 첫 번 째 실례 화 때 만 작용 하 며, Ext. Widget 은 얻 은 DOM 트 리 (cloneNode (true) DOM API 사용) 를 깊이 있 게 복제 합 니 다.
두 번 째 인 스 턴 스 (및 이후)
같은 작은 위 젯 클래스 의 다른 인 스 턴 스 를 만 들 때 Ext. Widget 은 캐 시 된 DOM 트 리 를 사용 하여 성능 의 작은 위 젯 DOM 트 리 를 만 들 고 깊이 있 게 복제 합 니 다.이것 은 원소 규범 을 재 처리 하고 기본 값 을 실행 하 는 업데이트 방법의 비용 을 피 할 수 있다.설정 한 업데이트 방법 이 정확 하 다 면 이 처리 과정 은 어느 정도 투명 합 니 다.물론 Ext. Widget 은 DOM 트 리 를 복사 한 후에 검색 요소 의 참조, 봉인 감청, 기본 값 이 아 닌 설정 속성 을 인 스 턴 스 로 설정 하 는 작업 도 해 야 합 니 다.그러나 이때 의 비용 은 클래스 의 설정 속성 이 아 닌 인 스 턴 스 를 부여 하 는 설정 값 의 수량 과 직 결 됩 니 다.
반복
단일 한 위 젯 을 만 들 고 초기 화 하 는 방법 을 연구 해 보 겠 습 니 다. 몇 가지 중요 한 개념 은 widgetcolumn 에서 작은 위 젯 을 사용 하 는 것 과 관련 이 있 습 니 다.생 성 을 제한 하 는 인 스 턴 스 가 항상 중요 하기 때문에 버퍼 렌 더 링 이 관건 입 니 다.이 방법 을 사용 하면 격자 가 기록 보다 적은 작은 위 젯 을 렌 더 링 하고 스크롤 영역 '이후' 를 이동 하고 새 줄 렌 더 링 '이전' 순환 으로 사용 해 야 합 니 다.이러한 변환 이 발생 하면 widgetcolumn 은 DOM 의 작은 위 젯 을 새 줄 로 이동 합 니 다. dataIndex 를 통 해 필드 데 이 터 를 읽 고 작은 위 젯 의 setConfig 를 호출 하여 defaultBind 속성 을 설정 합 니 다. 이것 은 apply 와 update 방법 을 호출 합 니 다. 따라서 인 코딩 이 정확 하면 작은 위 젯 은 현재 새로운 필드 값 을 다시 설정 할 수 있 습 니 다.현재 예제 의 작은 위 젯 에 서 는 편집 가능 한 값 만 표시 하기 때문에 updateValue 방법 으로 작은 위 젯 이 격자 셀 에 사용 되 었 는 지 확인 해 야 합 니 다.

column = me.getWidgetColumn && me.getWidgetColumn();
record = column && me.getWidgetRecord && me.getWidgetRecord();
if (record && column.dataIndex) {
    record.set(column.dataIndex, value);
}

방법 getWidgetColumn 과 getWidgetRecord 는 widgetcolumn 을 통 해 작은 위 젯 에 놓 여 있 기 때문에 격자 에 있 는 컨 텍스트 (context) 를 알 고 있 습 니 다.
작은 매듭
대부분의 작은 부품 에 대한 토론 은 격자 와 관련 이 있 지만 작은 부품 도 전통 부품 의 어느 곳 에 나 사용 할 수 있다.채점 소부 품 이 미니 소부 품 으로 Ext JS 5 를 도입 한 것 은 사실 이 됐다.다음은 예제 프로그램의 메 인 패 널 캡 처 입 니 다. items 배열 의 4 개의 인 스 턴 스 를 보 여 줍 니 다.
위 에 익숙 해 보인다 면 센 차 터치 모델 을 알 고 있 을 것 이다.Ext JS 5 의 확장 이지 만 Ext. Widget 은 본질 적 으로 Sencha Touch 에 있 는 Ext. AbstractComponent 의 마지막 버 전 입 니 다.그래서 구성 요소 대신 작은 위 젯 을 사용 하 시 겠 습 니까?많은 면 에서 작은 위 젯 을 만 드 는 것 은 구성 요 소 를 만 드 는 것 보다 간단 합 니 다.단순히 CSS 로 만 레이아웃 수 요 를 처리한다 면 특히 그렇다.또한, Sencha 이동 과 데스크 톱 프레임 워 크 를 계속 결합 하면 서 작은 위 젯 은 미래 에 경 계 를 뛰 어 넘 을 수 있 습 니 다.새 위 젯 의 전체 코드 와 예 시 를 찾 을 수 있 습 니 다.그것 을 즐 기 고 우리 에 게 너의 생각 을 알 게 해라.
저자: Don GriffinDon Griffin 은 Ext JS 핵심 팀 의 일원 입 니 다. Sencha 에 입사 하기 2 년 전 Ext JS 사용 자 였 으 며 광범 위 한 플랫폼 에서 20 년 이상 의 소프트웨어 엔지니어 링 경험 을 가지 고 있 습 니 다. 그의 경험 에는 웹 애플 리 케 이 션 프론트 엔 드 및 백 엔 드, 네 이 티 브 GUI 애플 리 케 이 션 설계 가 포함 되 어 있 습 니 다. network protocols and device drivers. Don’s passion is to build world class products that people love to use.