[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()

        }

    )

})

첫번째 컬럼은 고정되고, 두번째 컬럼만 스크롤이 생긴다.