사실 요번 편은 foreach문이 주인공이 아니다.

where절에 foreach문을 쓰고 싶은데 넘어온 파라미터가 배열이 아닐 때 배열형으로 만들어 주는 함수를 구현해본다.

 

[html]

<form name="frm" method="post">

<input type="checkbox" name="p_codes" value="01">신축

<input type="checkbox" name="p_codes" value="02">보수

<input type="checkbox" name="p_codes" value="03">증축

</form>

이 세 개의 체크박스를 모두 체크하고 submit을 했다고 치자.

 

code값이 01이거나 02이거나 03인것을 갖고 오는 쿼리문을 작성한다고 할 때 웬지 foreach문이 쓰고 싶다면 

아래함수를 만들어 배열로 구현해준다.

[Utils.java]

1
2
3
4
5
6
7
8
9
10
11
12
13
public static  List <String> makeForeach (String s, String gb){
    List<String> list =   new ArrayList<String>();
    String[] aCode = s.split(gb);
 
    if (s == null || "".equals(s)) {
        return null;
    }
    for(int i=0; i< aCode.length; i++){
        list.add(aCode[i].toString());
    }
 
    return list;
}
cs

 

이제 파라미터를 받아서 배열로 변경해보자. logger로 찍어보면 배열로 찍힐 것이다.

1
List<String> list p_codes = Utils.makeForeach(Utils.nullToStr(parms.get("p_codes")), ","); //여기서 콤마는 구분자임. 다른 구분자로도 사용가능
cs

 

 

그리고 마무리로 foreach를 사용한 쿼리문

[query.xml]

1
2
3
4
5
6
<if test='p_codes !=null'> 
AND CODE IN
<foreach collection="p_codes" item="code" index="index" separator="," open="(" close=")">
        #{code}
</foreach>
</if>
cs

숫자 타입은 사실 별건 없다.

xtype을 numberfield로만 지정해주면 특별할건 없지만서도...그리드에서는 숫자끼리 연산이 일어날 수 있으니 이 예제까지 구현해 보려고 한다. (원가 * 갯수라든가...)

 

1. 일반

1
2
3
4
5
6
7
8
9
10
11
12
{
    xtype : 'numberfield',
    name : 'con_amt',
    id : 'con_amt',
    emptyText : '0',
    labelAlign : 'right',
    fieldLabel: '공사대금',
    labelWidth: 80,
    width : 180,
    maxValue: 1000000000//최고값
    minValue: 10000 //최저값
}
cs

2. 그리드

1
2
3
4
5
6
7
8
9
10
11
12
{
    header: '단가',
    dataIndex : 'COST',
    align : 'right',
    width : 120,
    editor: new fm.NumberField({
        allowBlank: false,
        maxValue: 999999999//
        minValue: 0 //최저값
    }),
    renderer : Ext.util.Format.number(value, "0,000") //표현 식
}
cs

 

3. 그리드 셀값 연산

단가 COST값과 수량 QTY값을 곱해서  금액 AMOUNT에 셋팅해주는 코드이다.

editor안에 listeners를 정의하고 그 안에 change함수를 써서 값이 변할 때마다 이벤트가 발생한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{
    header: '수량',
    dataIndex : 'QTY',
    align : 'center',
    width : 80,
    editor: new fm.NumberField({
        allowBlank: false,
        maxValue: 999999999,
        minValue: 0,
        listeners : {
            change : function(f, e, g) {
                var grid = f.up("grid");
                var row = grid.getSelection()[0]; //현재 행
                var cost = row.get("COST");       //현재 행의 COST값
                var qty = e;                      //선택한 셀의 값
                var amount = 0;
 
                if(cost == null || cost == "") cost = 0;
                if(qty == null || qty == "") qty = 0;
 
                amount = qty * cost;
 
                row.set("AMOUNT", amount);      //현재 행의 AMOUNT에 계산된 값을 셋팅
            }
        }
    }),
    renderer : Ext.util.Format.number(value, "0,000")
},{
    header: '단가',
    dataIndex : 'COST',
    align : 'right',
    width : 120,
    editor: new fm.NumberField({
        allowBlank: false,
        maxValue: 999999999,
        minValue: 0,
        listeners : {
            change : function(f, e, g) {
                var grid = f.up("grid");
                var row = grid.getSelection()[0]; //현재 행
                var cost = e;                      //선택한 셀의 값
                var qty = row.get("QTY");         //현재 행의 QTY값
                var amount = 0;
 
                if(cost == null || cost == "") cost = 0;
                if(qty == null || qty == "") qty = 0;
 
                amount = qty * cost;
 
                row.set("AMOUNT", amount);
            }
        }
    }),
    renderer : Ext.util.Format.number(value, "0,000")
},{
    header: '금액',
    dataIndex : 'AMOUNT',
    align : 'right',
    width : 120,
    editor: new fm.NumberField({
        allowBlank: false,
        maxValue: 999999999,
        minValue: 0
    }),
    renderer : Ext.util.Format.number(value, "0,000")
}
cs

 

- 끝 -

'extjs' 카테고리의 다른 글

ExtJs 셀렉트박스, 콤보박스 xtype:combobox  (0) 2019.09.02
ExtJs 날짜타입 xtype : datefield  (0) 2019.09.02
ExtJs grid panel 기본구조 및 listener  (0) 2019.08.30
ExtJs 초간단 소개  (0) 2019.08.30

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

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

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

 

우선 store를 살펴보자

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//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);
            }
    }
});
cs

 

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

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

 

1. 일반

1
2
3
4
5
6
7
8
9
10
11
12
{
    xtype : 'combobox',
    editable : true,
    queryMode: 'local',
    name : 's_code'//객체명
    id : 's_code',
    emptyText : '코드선택..',
    displayField: 'code_nm'//코드명
    valueField: 'code'//코드값
    width : 160,
    store : storeCodeList
}
cs

이 콤보박스의 이름과 id는 s_code이며 옵션값은 code, 표시되는 내용에는 code_nm이 들어갈 것이다.  값을 선택 전에는 '코드선택..'이라고 표시가 된다.

2. 그리드패널

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    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'); 
    }
}
cs

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

+ Recent posts