ExtJS ref 속성의 응용

ExtJS 응용 프로그램 구성 요소 간의 인용을 개발하는 것은 비교적 번거로운 일이다.예를 들어 FormPanel의 밑에 있는 도구 모음의 어떤 단추의 이벤트 처리 함수에서 form의 어떤 필드를 인용하는 방법은 기본적으로 두 가지가 있다.
 

각 field에 ID를 부여하고 Ext.getCmp(ID)를 사용합니다

findParentByType으로 FormPanel을 찾은 다음 get () 로 field가 나타나는 순서에 따라formfield를 찾습니다

방법1은 간단하고 실현하기 쉽지만 이런form은 복용할 수 없습니다.방법2는 비교적 번거롭고form의layout이 바뀌거나 새로운 필드가 있으면 인용 코드를 다시 써야 합니다.
 
이러한 상황에 대해, ExtJS는 ref 설정 속성을 내놓았는데, 모든component는 이 속성을 사용하여 귀속 용기와 귀속 용기의 부모 노드에 이 속성에 대한 인용 이름을 주입할 수 있다.이 인용 이름이 있으면 이 구성 요소와 공통된 부모 노드가 있는 구성 요소를 비교적 편리하게 인용할 수 있습니다.
다음 예는 ExtJS 공식 문서에서 발췌한 것입니다.
 

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

이 예에서는 편집 가능한 격자 패널을 정의합니다. 이 패널의 afteredit 이벤트 처리 프로그램은 위쪽 도구 모음의 "Save"단추를 인용해야 합니다. ref 설정 속성을 사용하지 않고 인용 문제를 해결하려면 위에서 언급한 두 가지 방법에 따라 Save 단추에 유일한 표지를 주고 afteredit 이벤트 처리 함수에서 Ext.getCmp () 로 인용하거나 다음 코드를 사용하십시오.
 

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.getTopToolbar().get(0).enable();
        }
    }
});

이 방법은 그다지 이상적이지 않습니다. 레이아웃이 변할 때 get () 의 인덱스를 수정해야 합니다.예를 들어 Save 단추 앞에 구분자를 넣으면 get(0)을 get(1)으로 변경해야 합니다.
 

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [ '-', {
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.getTopToolbar().get(1).enable();
        }
    }
});