숫자 타입은 사실 별건 없다.
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 |