1. [ ExtJS 문서보는법 ]
1.
2.
아래 사진의 Documentation 클릭
3.
우측 상단에 사용하고자하는 컴포넌트를 검색, 예를 들어 xtype이 패널인 컴포넌트 관련문서를 검색하고 싶다하는 경우 search영역에 'panel'이라는 검색어를 입력하면 관련 클래스 목록이 출력되고, 원하는 내용을 선택하면 관련 컴포넌트 API 문서로 이동, 상단 URL 별로 클릭하지않아도 Document 우측상단의 M/C 구분을 주어서 컴포넌트 구분 가능
M: Modern(Sencha Touch)
C : Classic (ExtJS)
M/C 둘다 눌럿을 경우 통함검색가능
4.
configs : 각 컴포넌트에 설정 가능한, key/value 형식의 속성값
예를 들어, 페널 속성을 적용하고자 한다면, 'width : 300'이와같이 속성을 정의해주면, 컴포넌트에 적용이 되는것을 확인,
5.
method : 해당 컴포넌트 객체가 지원하는 기능들, 예를 들어 아래 method 부분에 기능들은 패널 자체 컴포넌트에서 동작되는 기능들
6.
events : 이벤트 핸들러를 정의할 때 필요한 key 속성값
listeners라는 속성에 서브형식으로 지정 후 , 이벤트 동작에 대해서 작성을 하면된다.
2. [ 예시 ]
•
버튼만들기
Ext.onReady(function() {
Ext.create("Ext.panel.Panel", {
width : 500,
height : 500,
renderTo : Ext.getBody(),
layout : 'border',
items : [{
xtype : 'panel',
region : 'north',
flex : 1,
title : '연습',
layout : 'hbox',
items : [{
xtype : 'button',
enableToggle : true,
iconCls : 'x-fas-fa-plus',
text : '메뉴선택',
region : 'north',
menu : [{
text : '메뉴1'
}, {
text : '메뉴2'
}]
}, {
xtype : 'splitbutton',
text : '스피릿버튼',
menu : [{
text : '메뉴3'
}, {
text : '메뉴4'
}]
}, {
xtype : 'segmentedbutton',
allowMultiple : true,
text : 'segmented버튼',
menu : [{
text : '메뉴1'
}, {
text : '메뉴2',
}],
handler : function(btn) {
console.log(btn.up('panel').down('segmentedbutton').getStore());
}
}]
}, {
xtype : 'panel',
region : 'center',
flex : 1,
title : '연습2'
}]
})
})
JavaScript
복사
