일반 패널에서 쓸때와 grid패널에서 쓸때가 살짝 차이가 있어서 두 가지로 정리해보겠다.
1. 일반
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
{
xtype: 'datefield',
name: 'record_dt',
id : 'record_dt',
emptyText: '등록일자',
labelAlign : 'right',
align : 'center',
width : 130,
format: 'Y-m-d',
submitFormat:'Y-m-d',
value: new Date("1980-01-01"), //디폴트 날짜 셋팅. 안하면 빈 값이다.
renderer : Ext.util.Format.date(new Date(value), "Y-m-d") //표시되는 날짜 형식
}
|
cs |
2. grid 패널
그리드패널은 조금 선언을 다르게 해줘야한다. 그리드의 데이터 컬럼 안에서 편집을 하는 것이기 때문에 editor로 선언해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
columns :[
{
header: '등록일자',
dataIndex : 'record_dt',
align : 'center',
width : 100,
readOnly : true,
format: 'Y-m-d',
submitFormat:'Y-m-d',
editor: new fm.DateField({
xtype: 'datefield',
format: 'Y-m-d'
}),
renderer : Ext.util.Format.date(new Date(value), "Y-m-d")//표시되는 날짜 형식
}
]
|
cs |
그리드의 경우는 그리드데이터를 가져온다. 대신 쿼리에서 표시하고 싶은 형식을 맞춰 줘야한다.
record_dt컬럼의 데이터 타입이 varchar2라면 '2019-05-25'로 저장을 하거나 to_date(record_dt, 'YYYY-MM-DD')로 변환해서 가져온다. datetime으로 저장되어있다면 to_char(record_dt, 'YYYY-MM-DD')로 가져오는게 좋을 것 같다.
이리하여 끝이면 좋겠지만 여러분의 DB 테이블의 record_dt컬럼의 데이터 타입이 datetime이 아니고 string형(char나 varchar)이라면 조금 귀찮아진다.
datefield는 선택된 날짜를 string형이 아닌 date타입으로 넘겨준다. 때문에 넘겨주기 전에 string형으로 바꿔주는 작업이 필요하다. 아래의 예제를 보면 두 가지 경우가 나와있는데 seachBtn은 일반적인 경우, saveGridRow는 그리드에서 넘어온 경우로 보면 된다. 둘 다 큰 차이 점은 없고 store의 파라미터로 셋팅을 해주냐 저장할 row데이터에 다시 값을 셋팅해주느냐 정도의 차이로 보면 된다. 필요한 부분을 보고 갖다 쓰시길.
|
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
|
var controller = Ext.create('Ext.app.ViewController', {
/**
* 검색버튼 클릭
*/
searchBtn : function(btn) {
var store = storeList;
var view = this.getView();
var record_dt = view.down("[name=record_dt]").getValue(); //패널에 있는 record_dt값을 가져온다.
var dt = new Date();
var tmp_m, tmp_d, conv_date;
dt = new Date(record_dt);
tmp_m = dt.getMonth()+1;
tmp_d = dt.getDate();
conv_date = dt.getFullYear().toString() +(tmp_m >9?tmp_m:"0"+tmp_m.toString()) + (tmp_d>9?tmp_d:"0"+tmp_d.toString());
record_dt = conv_date; //string형으로 변환
store.getProxy().setExtraParam("record_dt",record_dt); //스토어 파라미터값에 셋팅
store.removeAll();
store.currentPage = 1;
store.load(); //스토어 리로딩
}
,/**
* 저장
*/
saveGridRow : function(btn) {
var grid = btn.up("grid");
var store = btn.up("grid").getStore();
var saveRow = grid.getSelection(); //변동이 있는 row 가져옴 ->저장대상
if(saveRow.length > 0 ){
for (var i = 0; i < saveRow.length; i++) {
if( saveRow[i].data.record_dt != "" && saveRow[i].data.record_dt != undefined) {
var dt = new Date(saveRow[i].data.record_dt.toString());
var tmp_m = dt.getMonth()+1;
var tmp_d = dt.getDate();
var comp_date = dt.getFullYear() +"-" + (tmp_m >9?tmp_m:"0"+tmp_m) +"-" + (tmp_d>9?tmp_d:"0"+tmp_d);
saveRow[i].data.record_dt = comp_date; //string형으로 변환된 값을 saveRow에 다시 셋팅
}
}
}
}
});
|
cs |
'extjs' 카테고리의 다른 글
| ExtJs 숫자 넘버 타입 xtype : numberfield 그리고 셀 연산 (0) | 2019.09.03 |
|---|---|
| ExtJs 셀렉트박스, 콤보박스 xtype:combobox (0) | 2019.09.02 |
| ExtJs grid panel 기본구조 및 listener (0) | 2019.08.30 |
| ExtJs 초간단 소개 (0) | 2019.08.30 |