ExtJS ref 속성의 응용
2671 단어 ext
방법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();
}
}
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
