본문 바로가기

Extjs

ExtJS 공통 ComboBox

ExtJS로 공통 콤보박스를 구현하였습니다.

Ajax로 콤보박스를 가져올 수 있는 URL이 있다는 가정하에 만들었고

사용방법은 아래코드를 보시면 됩니다.

{
    xtype: 'commcombo',
    cdKey: 'DB에서 읽어올 코드의 PK',
    addAll: true /*default false true로 하면 전체 항목이 첫번째 콤보에 들어감.*/
}

전체 소스입니다.

Ext.define('Ext.ux.CommCombo',{
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.commcombo',
    editable: false,
    queryMode: 'local',
    valueField: 'cd_key',
    displayField: 'cd_nm',
    addAll: false,
    cdKey: null,
    listeners: {
        afterrender: function(combo) {
            var store = Ext.create('Ext.data.Store', {
                autoload: false,
                fields: ['cd_key', 'parent_cd', 'cd_nm'],
                proxy: {
                    type: 'ajax',
                    url: '콤보URL',
                    headers: { 'Accept': 'application/json'    },
                    reader: {
                        root: 'list'
                    }
                }
            });
            combo.store = store;

            combo.getStore().load({
                params: {
                    cd_key: combo.cdKey
                },
                callback: function() {
                    if (combo.addAll) {
                        combo.getStore().insert(0, {cd_key: '%', cd_nm: '전체', parent_cd: '%'})
                    }
                }
            });
        }
    }
});


'Extjs' 카테고리의 다른 글

Grid row별 Combobox 필터링  (0) 2015.02.27
Grid group Header(colspan) Flex 문제  (0) 2014.04.24
EXTJS 그리드 행 높이 변경  (0) 2013.03.12
Extjs clearListeners  (0) 2013.02.14
그리드 칼럼에 HTML 태그 내용 보여주기  (0) 2013.01.30