ExtJS6 열여덟번째강의 - ExtJS 6 툴바, 이벤트리스너, 컬럼 렌더러(ExtJS 6 Understanding Toolbar Types and Listeners and Grid Renderers)
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼
https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ
1. tbar (top-docked toolbar)
그리드 상단에 위치하는 툴바
2. lbar (left-docked toolbar)
그리드 좌측에 위치하는 툴바
3. rbar (right-docked toolbar)
그리드 우측에 위치하는 툴바
4. bbar (bottom-docked toolbar)
그리드 하단에 위치하는 툴바
5. fbar (footer toolbar)
bbar와 동일한 위치에 존재하는 툴바 footer UI가 적용됨
꼭 그리드에만 존재하는 속성은 아닙니다.
하지만, 보통 고정적인 툴바의 경우, 대부분 그리드에 자주 사용됩니다.
위의 속성값들은 OBJECT 가 될수 있고, Array형식이 될 수 있습니다.
하나의 컴포넌트를 툴바내의 가득채우고자 한다면, OBJECT 형식으로, 여러개의 컴포넌트를 툴바에 적용시키고자 한다면, Array 형식으로 지정하면 되겠습니다.
위와 유사하게 dockedItems라는 속성이 있습니다.
위와 다른 점은 dockedItems 속성에 toolbar 컴포넌트 선언 후, dock이라는 config 속성을 지정해주어야 한다는 점입니다.
간단하게 tbar와 비교하여 작성해보도록 하겠습니다.
// tbar를 이용한 경우
{
xtype : 'grid',
tbar : [{
xtype : 'button',
text : '버튼'
}]
}
// dockedItems에서 dock를 top으로 지정한 경우
{
xtype : 'grid',
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
items : [{
xtype : 'button',
text : '버튼'
}]
}]
}
위와 같이 2개의 코드로 나눌 수 있지만, 결과물은 동일하게 나옵니다.
어떠한 속성을 사용할지에 대해서는 여러분들께서 선택하셔서 작성하시면 되겠습니다.
리스너(listeners)
이벤트 핸들링 관련부분을 담당하는 config 속성입니다.
각 컴포넌트마다 지원되는 이벤트 속성들이 다양하며 다릅니다.
지원 속성에 대해서는 document 사이트를 참고하여 적용하도록 합니다.
예를들어, 그리드의 셀클릭 이벤트를 예로 드는 코드를 작성해보도록 합니다.
※ 버튼의 경우는 별도로 handler 라는 속성이 있습니다.
클릭이벤트 리스너를 제공하지만, handler라는 속성을 이용하시는게 훨씬
간편합니다.
{
xtype : 'grid',
listeners : {
cellclick : function(obj,td,cellIndex,record,tr,rowIndex,e,eOpts){
alert("셀클릭!!");
}
}
}
위와 같이 listeners라는 속성안에 key는 이벤트 명을 정의하고 value 값으로는 function을 제작하는 방식으로 정의합니다.
function 정의 시, 어떠한 parameter들을 정의되어있는지 역시, 해당 이벤트 key를 document 문서를 찾은 후, 클릭해보면 자세히 나와있습니다.
영어를 잘 모르더라도, 대략적으로 parameter key 값들로 대략적인 유추가 가능합니다.
그리드 렌더러(Grid renderer)
마지막으로, 그리드 컬럼별 렌더러라는 속성이 있습니다.
예를들어, 서버에서 내려주는 특정 컬럼이 '10000'이라는 숫자값으로 내려오게 됩니다.
우리는 이 값을 그리드에 표출하게 되면 단순이 내려준 그대로 숫자값을 표출하게 됩니다.
만약, 3자리 콤마로 표출되게 해달라는 요구사항이 있습니다.
이럴경우, 값은 변경이 되지 않고, 화면상에만 콤마를 붙이도록 할수 있는것이 renderer 라는 config를 이용하면 되는 것입니다.
아래는 예제를 통한 코드 및 실행 결과입니다.
renderer 사용 전
Ext.create('Ext.panel.Panel',{
width : 500,
height : 500,
renderTo : Ext.getBody(),
items : [{
xtype : 'grid',
store : {
fields : ['price'],
data : [{
price : 10000
},{
price : 20000
}]
},
columns : [{
text : '값',
flex : 1,
dataIndex : 'price'
}]
}]
});
- 실행결과 -
renderer 사용 후
Ext.create('Ext.panel.Panel',{
width : 500,
height : 500,
renderTo : Ext.getBody(),
items : [{
xtype : 'grid',
store : {
fields : ['price'],
data : [{
price : 10000
},{
price : 20000
}]
},
columns : [{
text : '값',
flex : 1,
dataIndex : 'price',
renderer : function(value){
return Ext.util.Format.number(value,'0,000');
}
}]
}]
});
- 실행결과 -
위와같이 store에 정의 된 순수한 값을 renderer라는 속성을 통해서 화면에 표출된 값을 변경하게 해주었습니다.
※ 주의사항 - renderer 사용 시, 화면에 보여주는 값을 return 값으로 넘겨주어야 화면에 표출이 됩니다.
return 으로 값을 넘겨주지 않을 경우, 화면에는 표출이 되지 않습니다.