[Sencha&ExtJS] ExtJS 기초.9 - 콤보박스 (xtype:combo)

콤보 박스(xtype:combo)

데이터를 화면에 출력을 하려면, 

데이터스토어(Ext.data.Store)에 대해서 알아야 합니다.

데이터 스토어 정의 : 스토어 클래스는 모델 객체의 클라이언트 측의 캐시를 캡슐화 합니다.

스토어는 프로시를 경유하여 데이터를 로드하고, 또 그 안에 포함되어 있는 모델/인스턴스를 정렬 필터링 및 조회가기 위한 기능을 제공합니다.

스토어의 작성은 간단합니다.

데이터 스토어는 여러 컴포넌트에서 사용이 되고 있습니다.

Store클래스 사용하는 컴포넌트

콤보박스 : Ext.form.field.ComboBox

데이터뷰 : Ext.view.View

그리드 : Ext.grid.Panel

트리 : Ext.tree.Panel 

(Ext.data.TreeStore: Store개념은 동일하나 사용되는 Store클래스가 다름)

챠트 : Column / 3D Column / Bar / 3D Bar

콤보 박스 만들기

Ext.onReady(function(){

    Ext.create('Ext.Panel',{

        title : 'Combo TEST',

        items : [{

            xtype : 'combo',

            fieldLabel : 'Combo Box'

        }],

        renderTo : Ext.getBody()

    })

})

콤포 박스

store config 속성에 데이터 스토어 클래스 적용

Combo Box에는 실제값에 대한 필드명/화면에 출력할 필드명을 선언해주는 config가 있어야 합니다.

다음 항목이 없다면, 화면에 나타나지는 않습니다.

displayField: store 필드 중에 보여지는 필드명.

valueField: store 필드에서 전달 값으로 사용할 필드명.

다음과 같이 처리된다고 생각하면 됩니다.

<input value="zipcode">city</a>

store를 적용한 화면.

"콤보 박스" + "데이터 스토어"를 이용하여 콤보박스 목록 만들기

Ext.onReady(function(){

    Ext.create('Ext.Panel',{

        title : 'Combo TEST',

        items : [{

            xtype : 'combo',

            fieldLabel : 'Combo Box',

            // Store 추가

            displayField: 'city',

            valueField: 'zipcode',

            store : Ext.create('Ext.data.Store',

    {

                    fields: ['city','zipcode'],

                    data: [ ['irvine','92614'], ['cason','92333'], ['la','94223']  ]

    }

)

        }],

        renderTo : Ext.getBody()

    });

})

데이터 Store에서 알아야 할 점

Array 방식을 JSON형식도 변경한 예제

data : [

{ city:'irvine', zipcode: '92614' }, { city:'carson', zipcode: '90745'} 

]

JSON과 비교

- Array 형태의 경유는 값의 순서가 뒤바뀌면 안되지만, 값만 넣어주면 되는 장점이 있다.

- JSON 형태는 KEY: VALUE 형태로 선언이 되기에 순서가 뒤 바뀌어도 선언도니 KEY를 찾아 표충이 된다는 것이 장점.

초기값 선택하기 

Combobox에 예제 Irvine을 기초값으로 가지고 싶을때,

html에서 다음과 같은 명령을 원할때,

<select><option value="92614" selected>irvine</option><option value="90745">carson</option></select>

store선언 다음에 listeners에 render를 추가해서, 해당 값을 선택하게 한다.

Ext.onReady(function(){

    Ext.create('Ext.Panel',{

        title : 'Combo TEST',

        items : [{

            xtype : 'combo',

            fieldLabel : 'Combo Box',

            // Store 추가

            displayField: 'city',

            valueField: 'zipcode',

            store : Ext.create('Ext.data.Store',

           {

                    fields: ['city','zipcode'],

                    data: [ ['irvine','92614'], ['cason','92333'], ['la','94223']  ]

    }

   ),

   listeners:

{

   render:function(field) {

 field.setValue('92614');

    }

}

        }],

        renderTo : Ext.getBody()

    });

})