ExtJs 사용 요약(매우 상세함)_extjs

1. 요소 가져오기
1.Ext.get
var el = Ext.get('myElementId');//요소 가져오기, document.getElementById('myElementId ')와 동일;/ /캐시됩니다
2. Ext.fly
var el = Ext.fly('myElementId')//캐시할 필요가 없습니다.
참고: 플라이웨이트 디자인 패턴은 메모리 절약 패턴입니다. 이 패턴의 일반적인 원리는 단일 전체 개체를 만든 다음 반복적으로 사용하는 것입니다.
3.Ext.getDom
var elDom = Ext.getDom('elId'); // id를 기준으로 dom 노드를 확인합니다.
var elDom1 = Ext.getDom(elDom); id를 기반으로 한 dom 노드 dom 노드 확인

2. CSS 요소
4.addClass
Ext.fly('elId').addClass('myCls'); // 요소의 myCls' 스타일 추가
5.radioClass
Ext.fly('elId').radioClass('myCls');//이 요소에 하나 이상의 className을 추가하고 모든 측면을 제거합니다(형제). 같은 이름을 가진 노드의 스타일.
6.removeClass
Ext.fly('elId').removeClass('myCls'); // 요소 스타일 제거
7.toggleClass
Ext.fly('elId') .ggleClass('myCls'); // 스타일 추가
Ext.fly('elId').toggleClass('myCls') // 스타일 제거
Ext.fly('elId').toggleClass(' myCls'); //스타일 추가
8.hasClass
if (Ext.fly('elId').hasClass('myCls')) {//이 스타일이 추가되었는지 확인
/ / 스타일 지정됨...
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA', 'myClsB');//대체 스타일
11.getStyle
var color = Ext.fly('elId').getStyle('color');//요소의 통합된 현재 스타일과 계산된 스타일을 반환합니다.
var zIndx = Ext.fly('elId').getStyle('z-index');//요소의 통합된 현재 스타일과 계산된 스타일을 반환합니다.
12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//요소의 스타일을 설정합니다. 또한 개체 매개변수를 사용하여 여러 스타일을 포함할 수도 있습니다.
13.getColor
Ext.fly('elId').getColor('color');//지정된 CSS 속성의 CSS 색상을 반환합니다.
14.setOpacity

Ext. fly ('elId').setOpacity(.45, true);//요소의 투명도를 설정합니다.
15.clearOpacity
Ext.fly('elId').clearOpacity();//이 요소의 투명도 설정을 지웁니다


Dom Tour
16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red')
17.is는 현재 요소가 들어오는 선택기와 일치하는지 테스트합니다. 일관된.

18.findParent
이 노드를 배치하고, 이 노드를 시작점으로 사용하고, 주변에 있는 외부 상위 노드를 검색합니다. 검색 조건은 들어오는 단순 선택기와 일치해야 합니다.
Ext.fly('elId').findParent('div'); // dom 노드 반환
Ext.fly('elId').findParent('div', 4) // 4개 노드 찾기
Ext.fly('elId').findParent('div', null, true); // Ext.Element를 반환합니다.
19.findParentNode
이 노드의 "상위 노드"를 " 이 노드의 "부모 노드"를 시작점으로 사용하고 외부 "부모" 노드를 주변까지 검색합니다. 검색 조건은 들어오는 단순 선택기와 일치해야 합니다.
Ext.fly('elId').findParentNode('div');
20.up
DOM을 따라 주변의 외부 "상위" 노드를 검색합니다. 검색 조건은 다음과 일치해야 합니다. 간단한 선택기가 전달되었습니다.
Ext.fly('elId').up('div');
Ext.fly('elId').up('div', 5) // 5개 레이어 내에서만 검색
21.select
CSS 선택기의 매개변수를 전달한 다음 CSS 선택기를 사용하여 현재 요소 아래에서 예상되는 일치 하위 노드 집합을 형성합니다. 즉, "선택" 작업을 수행하고 마지막으로 Ext를 사용합니다. .CompositeElement 유형 결합된 요소의 형태로 반환됩니다. Ext.select()로 호출하면 문서를 검색할 수 있다는 뜻이다.
// 결과의 CompositeElement를 반환합니다
Ext.fly('elId').select('div:nth-child(2)')
// 배열을 반환합니다
Ext.fly( ' elId').select('div:nth-child(2)',
true);
// 전체 문서는
Ext.select('div:nth-child()로 검색됩니다. 2)') ;
22.query
쿼리를 수행하고 DOM 노드 배열을 반환합니다. 선택적 두 번째 매개변수는 쿼리의 시작점으로 설정되거나 지정되지 않은 경우 문서로 설정됩니다.
// dom 노드로 구성된 배열을 반환합니다.
Ext.query('div:nth-child(2)')
23.child
깊이 제한 없이 입력 선택기를 기준으로 합니다. 일치하는 경우 단일 하위 노드를 검색하고 선택합니다.
Ext.fly('elId').child('p.highlight'); // 반환된 유형은 Ext.Element입니다.
Ext.fly('elId').child('p.highlight', true); // dom 노드 반환
24.down
이 선택기를 기반으로 단일 하위 노드를 "직접" 선택합니다.
Ext.fly('elId').down('span'); // 반환된 유형은 Ext.Element입니다.
Ext.fly('elId').down('span', true) / / dom 노드 반환

25.parent
현재 노드의 상위 노드를 반환하고 선택적으로 예상 선택자를 입력합니다.
// 상위 노드를 반환하며 유형은 Ext.Element
Ext.fly('elId').parent()
// 상위 노드를 반환하며 유형은 html dom
Ext.fly( 'elId').parent("", true);
// 상위 노드를 반환하지만, 발견되면 유형은 Ext.Element Ext.fly('elId').parent("div");
26.next
텍스트 노드를 건너뛰고 다음 측면 노드를 가져옵니다. 선택적으로 예상 선택자를 전달합니다.
// 다음 측면 노드를 반환합니다. 유형은 Ext.Element
Ext.fly('elId').next()
// 다음 측면 노드를 반환하며 유형은 html dom
Ext.fly('elId').next("", true);
// 다음 측면 노드를 반환하지만, 발견되면 유형이 Ext로 반환됩니다. 요소
Ext .fly('elId').next("div");
27.prev
이전 측면 노드를 가져오고 텍스트 노드를 건너뜁니다. 선택적으로 예상 선택자를 전달합니다.
// 이전 측면 노드를 반환합니다. 유형은 Ext.Element
Ext.fly('elId').prev()
// 이전 측면 노드를 반환하며 유형은 html dom
Ext.fly('elId').prev("", true);
// 이전 측면 노드를 반환하지만, 발견된 경우 유형은 Ext입니다. 요소
Ext .fly('elId').prev("div");
28.first
텍스트 노드를 건너뛰고 첫 번째 측면 노드를 가져옵니다. 선택적으로 예상 선택자를 전달합니다.
// 첫 번째 측면 노드를 반환합니다. 유형은 Ext.Element
Ext.fly('elId').first()
// 첫 번째 측면 노드를 반환하며 유형은 html dom
Ext.fly('elId').first("", true);
// 첫 번째 측면 노드를 반환하지만, 발견된 경우 유형은 Ext입니다. Element
Ext.fly('elId').first("div");
29.last
텍스트 노드를 건너뛰고 마지막 측면 노드를 가져옵니다. 선택적으로 예상 선택자를 전달합니다.
// 마지막 측면 노드를 반환합니다. 유형은 Ext.Element
Ext.fly('elId').last()
// 마지막 측면 노드를 반환하며 유형은 html dom
Ext.fly('elId').last("", true);
// 마지막 측면 노드를 반환하지만, 발견된 경우 유형은 Ext입니다. 요소
Ext .fly('elId').last("div");


4. DOM 조작(DHTML의 일반적인 작업은 DOM을 추가, 삭제, 수정 및 확인하는 것입니다. elements) 30.appendChild
입력된 요소를 해당 요소의 하위 요소로 분류합니다.
var el = Ext.get('elId1');
// ID로 지정
Ext.fly('elId').appendChild('elId2')// Ext.Element
Ext.fly('elId').appendChild(el); 추가
// 선택기 조합 추가
Ext.fly('elId').appendChild(['elId2','elId3' ] );
// dom 노드 직접 추가
Ext.fly('elId').appendChild(el.dom)
// div 그룹인 CompositeElement 추가
Ext.fly( ' elId').appendChild(Ext.select('div'));
31.appendTo
이 요소를 입력 요소에 추가합니다.
var el = Ext.get('elId1');
// 'elId2'에 'elId'가 추가되었습니다.
Ext.fly('elId').appendTo('elId2'); >Ext.fly('elId').appendTo(el); //
Ext.Element에 추가 el
32.insertBefore
요소의 매개변수를 전달하고 현재 요소 앞에 배치합니다. .
var el = Ext.get('elId1');
// dom 노드를 앞에 삽입
Ext.fly('elId').insertBefore('elId2')// Ext .Element el이 앞에 삽입됩니다.
Ext.fly('elId').insertBefore(el)
33.insertAfter
요소의 매개변수를 전달하고 현재 요소 뒤에 배치합니다.
var el = Ext.get('elId1');
// dom 노드는
Ext.fly('elId').insertAfter('elId2')// 뒤에 삽입됩니다.
Ext.fly('elId').insertAfter(el);
34.insertFirst
뒤에 Ext .Element el을 삽입하면 요소를 삽입하거나 생성할 수 있습니다(생성하려면 "DomHelper 구성 항목을 사용하세요). object"가 매개변수로 전달됨) 즉, 이 요소는 현재 요소의 첫 번째 하위 요소로 나타납니다.
var el = Ext.get('elId1');
//삽입된 dom 노드가 첫 번째 요소입니다.
Ext.fly('elId').insertFirst('elId2'); // 첫 번째 요소로 Ext.Element 삽입
Ext.fly('elId').insertFirst(el)
// DomHelper 구성 항목을 사용하여 새 노드를 생성하면 새 노드가 첫 번째가 됩니다. one 하위 요소가 삽입됩니다.
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: '안녕하세요 저는 새로운 첫째 아이입니다'
});
35.replace
는 전달된 요소를 현재 요소로 바꾸는 데 사용됩니다.
var el = Ext.get('elId1');
// 'elId2'를 대체하는 'elId'
Ext.fly('elId').replace('elId2')
// 'elId1'을 대체할 'elId'
Ext.fly('elId').replace(el);
36.replaceWith
이 요소를 전달된 요소로 바꿉니다. 매개변수는 새 요소일 수도 있고 생성할 DomHelper 구성 항목 개체일 수도 있습니다.
var el = Ext.get('elId1');
Ext.fly('elId').replaceWith('elId2'); // 'elId2'는 'elId'를 대체합니다. ('elId').replaceWith(el); //
'elId1'은 'elId'를 대체합니다.
// DomHelper 구성 항목을 사용하여 새 노드를 생성하고 'elId'를 이 노드로 바꿉니다.
Ext.fly('elId').replaceWith({
tag: 'p',
cls: 'myCls',
html: '안녕하세요 elId를 교체했습니다'
}) ;



5. DomHelper 구성 항목

37.createChild
DomHelper 구성 항목 객체의 매개변수를 전달하고 생성한 후 요소에 추가합니다.
var el = Ext.get('elId'); var dhConfig = { tag: 'p',
cls: 'myCls',
html: '안녕하세요. 교체했습니다. elId'
};
// 새 노드를 생성하고 'elId' 안에 배치합니다.
el.createChild(dhConfig)
// 새 노드를 생성하여 첫 번째 하위 요소로 배치합니다. of el Before
el.createChild(dhConfig, el.first());
38.wrap
현재 요소 외부에 래핑된 새 요소를 만듭니다.
Ext.fly('elId').wrap(); // div는 elId를 래핑합니다
// elId를 래핑하기 위해 새 요소를 사용합니다
Ext.fly('elId').wrap( {
tag: 'p',
cls: 'myCls',
html: '안녕하세요 elId를 교체했습니다'
})


6.
38.insertHtml
이 요소에 HTML 조각을 삽입하세요. 요소에 삽입할 HTML 위치를 beforeBegin, beforeEnd, afterBegin, afterEnd로 지정할 수 있습니다. 두 번째 매개변수는 HTML 조각을 삽입하는 것이고, 세 번째 매개변수는 Ext.Element 유형의 DOM 객체를 반환할지 여부를 결정하는 것입니다.
Ext.fly('elId').insertHtml(
'beforeBegin', '

Click me

',
true
) // Ext.Element 반환
39.remove
DOM에서 현재 요소를 제거하고 캐시에서 삭제하세요. .
Ext.fly('elId').remove(); //
elId가 캐시에도 없고 DOM에도 없습니다.
40.removeNode
문서의 DOM 노드를 제거합니다. 본문 노드인 경우 무시됩니다.
Ext.removeNode(node); // dom에서 (HTMLElement) 제거



7. Ajax

41.load
업데이터 Ext에 직접 액세스 .Updater.update() 메소드(동일한 매개변수). 매개변수는 Ext.Updater.update() 메소드와 일치합니다.
Ext.fly('elId').load({url: 'serverSide.php'})
42.getUpdater 이 요소의 UpdateManager를 가져옵니다.
var updr = Ext.fly('elId').getUpdater(); updr.update({
url: 'http://myserver.com/index.php',
params : {
param1: "foo",
param2: "bar"
}
})


8. 이벤트 처리

43. addListener/on
이 요소에 이벤트 처리 기능을 추가합니다. on()은 그 약어입니다. 약어 방법은 동일한 효과를 가지며 코드를 작성할 때 노력을 절약합니다.
var el = Ext.get('elId');
el.on('click', function(e,t) { // e는 표준화된 이벤트 객체입니다(Ext.EventObject)
// t는 Ext.Element인 클릭 대상 요소입니다. // 객체 포인터 this도 t
}를 가리킵니다.
44.removeListener/un
요소 이벤트 핸들러를 제거합니다. un()은 약어입니다.
var el = Ext.get('elId');
el.un('click', this.handlerFn)
// 또는
el.removeListener('click', this. handlerFn);
45.Ext.EventObject
EventObject는 다양한 브라우저를 통합하고 W3C 표준 방법을 준수하려는 이벤트 모델을 제공합니다.
// eIt은 표준 이벤트 객체가 아니고 Ext.EventObject입니다.
function handlerClick(e){
e.preventDefault();
var target = e.getTarget();
...
}
var myDiv = Ext.get( 'myDiv');
myDiv.on("click", handlerClick);
// 또는
Ext.EventManager.on('myDiv', 'click', handlerClick); EventManager.addListener('myDiv', 'click', handlerClick);


9. 고급 이벤트 기능 46. 이벤트 위임을 대신 사용하려면 이벤트를 등록하세요. 컨테이너의 핸들러를 선택하고 첨부된 로직에 따라 선택합니다:
Ext.fly('actions').on('click, function(e,t) {
switch(t.id) {
case ''btn-edit':
// 특정 요소의 이벤트를 처리하는 구체적인 프로세스
break
case 'btn-delete':
// 특정 요소의 이벤트를 처리하는 구체적인 프로세스 elements
break;
case 'btn-cancel':
// 특정 요소의 이벤트를 처리하는 구체적인 프로세스
break;
}); >47. Delegate Delegate
이벤트 핸들러 등록 시 이 옵션을 추가할 수 있습니다. 대상 요소를 필터링하거나 한 수준 아래 대상의 하위 항목을 찾는 데 사용되는 간단한 선택기입니다.
el.on('click', function(e,t) {
//이벤트별 프로세스 실행
}, this, {
// '클릭 가능' 하위 항목에 유효
delegate : '.clickable'
});
48. Flip hover
이것은 Ext의 플립 메뉴의 예입니다:
// 마우스가 요소에 들어갈 때 처리
함수 enter(e , t){
t.toggleClass('red');
}
// 마우스가 요소를 떠날 때 처리
function Leave(e,t){
t.toggleClass( ' red');
// hover 구독
el.hover(over, out)
49. 이벤트 핸들러 제거 RemoveAllListeners
가입된 리스너 모두 제거.
el.removeAllListeners();
50. 단일 트리거 여부
이벤트 핸들러 등록 시 이 옵션을 추가하고 구성할 수 있습니다. True는 이벤트가 트리거된 후 다음 번에 자체적으로 제거되는 핸들러 함수를 추가하는 것을 의미합니다.
el.on('click', function(e,t) {
//이벤트를 실행하는 구체적인 프로세스
}, this, {
single: true // 그렇지 않습니다. 이벤트
}) 1회 발생 후 다시 실행됩니다.
51. Buffer
이벤트 핸들러 등록 시 이 옵션을 추가할 수 있습니다. 밀리초 단위로 지정하면 Ext.util.DelayedTask 지연 이후에 처리 기능이 실행되도록 예약됩니다. 해당 이벤트에서 이벤트가 다시 발생하면 원래 핸들러는 활성화되지 않지만 그 자리에 새 핸들러가 예약됩니다.
el.on('click', function(e,t) {
//이벤트의 특정 프로세스 실행
}, this, {
buffer: 1000 // 이벤트 반복 1초 시간 간격
});
52. 지연
이벤트 핸들러 등록 시 이 옵션을 추가할 수 있습니다. 사후 트리거 이벤트 처리 기능의 지연 실행 시간을 지정합니다.
el.on('click', function(e,t) {
//이벤트별 프로세스 실행
}, this, {
// 이벤트 지연, 이벤트 응답 후 타이밍 시작 (여기서 1초)
delay: 1000
})
53. Target target
이벤트 핸들러 등록 시 이 옵션을 추가할 수 있습니다. 다른 대상 요소를 지정하려면 이 구성 항목에서 설정할 수 있습니다. 이렇게 하면 이벤트 보고 단계에서 이 요소가 발견될 때만 이 처리 기능이 실행됩니다.




코드 복사

코드는 다음과 같습니다.el.on('click', function (e, t) { //이벤트를 실행하는 구체적인 프로세스}, this, { //내부의 첫 번째 'div'를 만날 때만 이벤트가 트리거됩니다

대상 : el.up('div')

})



10. 크기 및 크기
54.getHeight
요소의 오프셋 높이를 반환합니다.
var ht = Ext.fly('elId').getHeight();
55.getWidth
요소의 오프셋 너비를 반환합니다.
var wd = Ext.fly('elId').getWidth();
56.setHeight
요소의 높이를 설정합니다.
Ext.fly('elId').setHeight();
57.setWidth
요소의 너비를 설정합니다.
Ext.fly('elId').setWidth();
58.getBorderWidth
지정된 면(들)의 패딩 너비를 반환합니다.
var bdr_wd = Ext.fly('elId').getBorderWidth('lr');
59.getPadding
은 t, l, r, b 또는 임의의 조합일 수 있습니다. 예를 들어, lr 매개변수를 전달하면 (l)왼쪽 패딩, 오른쪽 패딩이 생성됩니다.
var padding = Ext.fly('elId').getPadding('lr');
60.clip
현재 오버플로(오버플로)를 저장한 다음 요소의 오버플로 부분을 잘라냅니다. unclip( )을 사용하여 제거합니다.
Ext.fly('elId').clip();
61.unclip
clip()을 호출하기 전에 원래 잘린 부분(오버플로됨)을 반환합니다.
Ext.fly('elId').unclip();
62.isBorderBox
요소가 테두리 상자를 사용하는지 확인하려면 다양한 CSS 규칙/브라우저를 테스트하세요.
if (Ext.isBorderBox) {
//
}

11. Positioning

63.getX
상대 요소를 반환합니다. 페이지 좌표의 X 위치에 있습니다. 올바른 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 결합되지 않은 요소는 false를 반환함).
var elX = Ext.fly('elId').getX()
64.getY
페이지 좌표를 기준으로 요소의 Y 위치를 반환합니다. 올바른 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 결합되지 않은 요소는 false를 반환함).
var elY = Ext.fly('elId').getY()
65.getXY
요소의 현재 페이지 좌표 위치를 반환합니다. 올바른 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 결합되지 않은 요소는 false를 반환함).
var elXY = Ext.fly('elId').getXY() // elXY는 배열입니다.
66.setX
페이지 좌표를 기준으로 요소의 X 위치를 반환합니다. 올바른 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 결합되지 않은 요소는 false를 반환함).
Ext.fly('elId').setX(10)
67.setY
페이지 좌표를 기준으로 요소의 Y 위치를 반환합니다. 올바른 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 결합되지 않은 요소는 false를 반환함).
Ext.fly('elId').setY(10)
68.setXY
요소의 현재 페이지 좌표 위치를 반환합니다. 올바른 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 결합되지 않은 요소는 false를 반환함).
Ext.fly('elId').setXY([20,10])
69.getOffsetsTo
현재 요소와 입력 요소 사이의 거리를 반환합니다. 올바른 페이지 좌표를 가지려면 두 요소 모두 DOM 트리의 일부여야 합니다(display:none 또는 추가되지 않은 요소는 false를 반환함).
var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);
70.getLeft
왼쪽의 X 좌표를 가져옵니다.
var elLeft = Ext.fly('elId').getLeft();
71.getRight
요소 오른쪽의 X 좌표(요소 X 위치 요소 너비)를 가져옵니다.
var elRight = Ext.fly('elId').getRight();
72.getTop
상위 Y 좌표를 가져옵니다.
var elTop = Ext.fly('elId').getTop();
73.getBottom
요소의 하단 Y 좌표(요소 Y 위치 요소 너비)를 가져옵니다.
var elBottom = Ext.fly('elId').getBottom();
74.setLeft
요소의 왼쪽 위치를 설정하려면 setX() 대신 CSS 스타일을 직접 사용하세요.
Ext.fly('elId').setLeft(25)
75.setRight
CSS 요소의 스타일을 Right로 설정합니다.
Ext.fly('elId').setRight(15)
76.setTop
요소의 상단 위치를 설정하려면 setY() 대신 CSS 스타일을 직접 사용하세요.
Ext.fly('elId').setTop(12)
77.setBottom
요소의 CSS Bottom 스타일을 설정합니다.
Ext.fly('elId').setBottom(15)
78.setLocation
이 요소의 위치에 관계없이 페이지의 좌표 위치를 설정합니다. 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 추가되지 않은 요소는 유효하지 않은 것으로 간주되어 false를 반환합니다).
Ext.fly('elId').setLocation(15,32)
79.moveTo
이 요소의 위치에 관계없이 페이지의 좌표 위치를 설정하세요. 페이지 좌표를 가지려면 요소가 DOM 트리의 일부여야 합니다(display:none 또는 추가되지 않은 요소는 유효하지 않은 것으로 간주되어 false를 반환합니다).
Ext.fly('elId').moveTo(12,17)
80.position
요소의 위치를 ​​초기화합니다. 예상 위치가 전달되지 않고 아직 배치되지 않은 경우 현재 요소는 상대 위치로 설정됩니다.
Ext.fly('elId').position("relative")
81.clearPositioning
문서가 로드된 후 위치를 지우고 기본값으로 재설정합니다.
Ext.fly('elId').clearPositioning()
Ext.fly('elId').clearPositioning("top")
82.getPositioning
CSS 위치 지정 정보가 포함된 객체를 반환합니다. 유용한 팁: setPostioning과 함께 업데이트가 수행되기 전에 스냅샷을 찍은 다음 요소를 복원할 수 있습니다.
var pos = Ext.fly('elId').getPositioning()
83.setPositioning
getPositioning()에서 반환된 객체는 위치 지정에 사용됩니다.
Ext.fly('elId').setPositioning({
왼쪽: '정적',
오른쪽: '자동'
})
84.translatePoints
페이지로 보내기 요소의 CSS 왼쪽/상단 값으로 변환된 좌표에 대한 인수입니다.
// {왼쪽:translX, 위쪽: translY}
var points = Ext.fly('elId').translatePoints(15,18);