ExtJs 셀렉트박스, 콤보박스 xtype:combobox

extjs에서 셀렉트박스를 쓰려면 xtype combobox를 쓴다.

콤보박스는 필수적으로 store가 필요한데 이는 store에 직접 데이터를 정의해도 되고 ajax통신으로 db에서도 가져올 수 있다. 

이번 편에서는 data store정의와 이를 이용한 콤보박스 구현을 해보겠다.

 

우선 store를 살펴보자

1번 storeCodeList는 스토어정의부분에 데이터를 직접 정의했다.

2번 storeBigCate는  getBigCateList.do라는 java단을 호출하여 ajax로 DB에서 데이터를 가져오도록 하고 있다. 

//1. store에 데이터를 직접 정의
var storeCodeList = Ext.create('Ext.data.Store', {
    fields: ['code','code_nm', 'b_cate', 's_cate'],
    data: [
        {code: '01', code_nm: '신축', b_cate:1, s_cate : '1101'},
        {code: '02', code_nm: '보수', b_cate:2, s_cate : '1202'},
        {code: '03', code_nm: '증축', b_cate:3, s_cate : '1301'}
    ]
});
 
//2. ajax통신으로 db에서 데이터를 불러옴
var storeBigCate = Ext.create('Ext.data.Store', {
    autoLoad : true,
    fields: ['b_cate','cate_nm'],
    proxy : {
            type : 'ajax',
            actionMethods : {
                read : 'POST'
            },
            url : 'getBigCateList.do',
            reader : {
                type : 'json',
                rootProperty : 'list' //getBigCateList.do에서 list라는 이름으로 데이터를 셋팅해줘야함. ex) parms.put("list", cateList);
            }
    }
});

 

그럼 본격적으로 콤보박스 구현을 해보자

이번에도 일반적인 구현과 grid위에 구현하는 방법 두가지를 소개한다.

 

1. 일반

{
    xtype : 'combobox',
    editable : true,
    queryMode: 'local',
    name : 's_code', //객체명
    id : 's_code',
    emptyText : '코드선택..',
    displayField: 'code_nm', //코드명
    valueField: 'code', //코드값
    width : 160,
    store : storeCodeList
}

2. 그리드패널

{
    header: '대분류',
    dataIndex : 'BIG_CATE',
    align : 'center',
    width : 160,
    editor: new Ext.form.ComboBox({ //콤보박스 구현
        displayField: 'cate_nm',
        valueField: 'b_cate',
        editable: true,
        forceSelection: true,
        mode: 'local',
        store: storeBigCate,
        triggerAction: 'all'
    }),
    renderer: function(val) { //선택한 값 selected로 보여주기
        var recordIndex = storeBigCate.find('b_cate', val); 
 
        if (recordIndex === -1) {
            return '선택';
        }
 
        return storeBigCate.getAt(recordIndex).get('cate_nm'); 
    }
}

그리드에서는 editor로 콤보박스를 구현하고 renderer로 선택된 그리드의 값을 보여준다.