[Sencha&ExtJS] ExtJS 기초.11 - 그리드패널 Ext.grid.Panel
Ext.grid.Panel
그리드(Grid)는 표 형식의 데이터를 나타내는 컴포넌트로, 참 많이 사용됩니다.
여기서 컬럼에 어떤 field를 뿌려줄지 dataIndex configs로 정의를 해줘야 한다.
설정이 없으면, combox 에 dispalyField/valueField 미정의시 처럼 화면에 나오지 않게 된다.
Ext.onReady(function(){
Ext.create(
'Ext.grid.Panel',
{
title: 'Grid 예제',
columns : [ {flex: 1, text:'첫번째', dataIndex:'first'},{flex: 1, text:'두번째', dataIndex:'second'} ],
store : Ext.create(
'Ext.data.Store',
{
fields: ['first','second','third'],
data : [{first:'1-1',second:'1-2'},{first:'2-1',second:'2-2'}] //=동일= data: [['1-1','1-2'],['2-1','2-2']]
}
),
renderTo : Ext.getBody()
}
)
})
기본 data configs를 이용한 값 설정
그리드 패널 사이즈 고정하기
Ext.onReady(function(){
Ext.create(
'Ext.grid.Panel',
{
title: 'Grid 예제',
width: 150,//Panel사이즈 줄이면, bottom에 스크롤이 생긴다.
columns : [ {text:'첫번째 컬럼', dataIndex:'first'},{text:'두번째 컬럼', dataIndex:'second'} ],
store : Ext.create(
'Ext.data.Store',
{
fields: ['first','second','third'],
data: [{first:'1-1',second:'1-2'},{first:'2-1',second:'2-2'}]
}
),
renderTo : Ext.getBody()
}
)
})
그리드 아래에 스크롤이 생긴 것을 볼 수 있다.
특정 Column 고정하기
locked: true 의 config로 특정 Column을 고정할 수 있다.
Ext.onReady(function(){
Ext.create(
'Ext.grid.Panel',
{
title: 'Grid 예제',
width: 150,//column Fixed
columns : [ {text:'첫번째 컬럼', locked:true, dataIndex:'first'},{text:'두번째 컬럼',dataIndex:'second'} ],
store : Ext.create(
'Ext.data.Store',
{
fields: ['first','second','third'],
data: [{first:'1-1',second:'1-2'},{first:'2-1',second:'2-2'}]
}
),
renderTo : Ext.getBody()
}
)
})
첫번째 컬럼은 고정되고, 두번째 컬럼만 스크롤이 생긴다.
