그리드 기본 구조는 아래와 같다.
controller, store, panel이 정의가 되어있어야 함.
|
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
Ext.onReady(function(){
//Main Controller
var controllerList = Ext.create('Ext.app.ViewController', {
alias : 'controller.useList',
/**
* 최초데이터로드
*/
onLoadData : function() {
var store = storeList;
store.removeAll();
store.load();
},
clickBtn : function(btn){
//버튼클릭 이벤트
}
});
var storeList = Ext.create('Ext.data.Store', {
fields: ['code','cate_nm', 'b_cate', 's_cate'],
data: [
{code: '01', cate_nm: '신축', b_cate:1, s_cate : '1101'},
{code: '02', cate_nm: '보수', b_cate:2, s_cate : '1202'},
{code: '03', cate_nm: '증축', b_cate:3, s_cate : '1301'}
]
});
var storeBigCate = Ext.create('Ext.data.Store', {
fields: ['b_cate','code_nm'],
data: [
{b_cate: 11, cate_nm: '대분류1'},
{b_cate: 12, cate_nm: '대분류2'},
{b_cate: 13, cate_nm: '대분류3'}
]
});
var storeSmallCate = Ext.create('Ext.data.Store', {
fields: ['b_cate', 's_cate','code_nm'],
data: [
{b_cate: 11, s_cate: '1101', code_nm: '대분류1_소분류1'},
{b_cate: 11, s_cate: '1102', code_nm: '대분류1_소분류2'},
{b_cate: 12, s_cate: '1201', code_nm: '대분류2_소분류1'},
{b_cate: 12, s_cate: '1202', code_nm: '대분류2_소분류1'},
{b_cate: 12, s_cate: '1203', code_nm: '대분류2_소분류3'},
{b_cate: 13, s_cate: '1301', code_nm: '대분류3_소분류1'}
]
});
var mainPanel = Ext.create('Ext.grid.Panel', {
iconCls: 'x-fa fa-archive',
title : "자산목록",
renderTo: document.getElementById('body-text'), //html페이지 안에 id가 body-text인 div에 이 panel이 그려짐
frame: true,
height: 700,
width: 1300,
controller: controllerList, //controrller 지정
disabled : false,
selModel: {
type: 'checkboxmodel'
},
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
viewConfig : {
emptyText : '데이터가 존재하지 않습니다'
},
border: true,
listeners : {
boxready : function(){
controllerList.onLoadData(); //panel이 로딩될때 호출되는 함수
},
rowclick : function(btn){
//rowclick시 발생 이벤트
},
cellclick : function(grid, record){
//cell click시 발생이벤트
},
beforeedit : function(f, c){
//편집 전 수행하는 이벤트
}
},
store : storeList, //이 grid의 데이터
tbar : [
//grid 상단. 주로 검색기능을 넣는다
],
columns : [
//grid 데이터 출력
{
xtype: 'rownumberer',
width : 50
},{
header: '코드',
dataIndex : 'code',
align : 'center',
width : 110
},{
header: '코드명',
dataIndex : 'code_nm',
align : 'center',
width : 110
},{
header: '대분류',
dataIndex : 'b_cate',
align : 'center',
width : 110
editor: new Ext.form.ComboBox({
displayField: 'cate_nm',
valueField: 'b_cate',
editable: false,
forceSelection: true,
mode: 'local',
store: storeBigCate,
triggerAction: 'all'
}),
renderer: function(val) {
var recordIndex = storeBigCate.find('b_cate', val);
if (recordIndex === -1) {
return '선택';
}
return storeBigCate.getAt(recordIndex).get('cate_nm');
}
},{
header: '소분류',
dataIndex : 's_cate',
align : 'center',
width : 110
}
],
bbar : { //grid 하단. 주로 페이징을 넣는다.
xtype: 'pagingtoolbar',
displayInfo: true,
// displayMsg: 'Page {0} - {1} of {2}',
displayMsg: '',
emptyMsg: "No Data"
}
});
});
|
cs |
우선 이번 포스트에선 listeners의 기능을 살펴보도록한다.
listeners는 뭔가 액션이 있을 때 이벤트를 설정해 줄 수 있는 기능이다.
소개할 이벤트 들은 boxready, rowclick, cellclick, beforeedit이다.
boxready : 말 그대로 panel이 로딩되었을 때 실행하는 함수다. 보통은 grid이므로 불러올 store(데이터)를 로딩한다.
아래 소스는 controllerList에 정의되어있는 onLoadData()라는 함수를 호출하라는 것인데 이 함수에는 grid
에 뿌려줄 storeList를 로딩하라고 되어있을것이다 아마도...
|
1
2
3
|
boxready : function(){
controllerList.onLoadData(); //panel이 로딩될때 호출되는 함수
}
|
cs |
rowclick : grid의 row를 클릭했을 때 발생하는 이벤트이다. 선택한 행의 정보를 갖고 올 수 있다.
|
1
2
3
4
5
6
7
8
9
|
rowclick : function(btn){
var grid = btn.up("grid");
var row = grid.getSelection()[0]; //선택한 행 객체
var thisdidx = btn.lastFocused.rowIdx; // 선택한 행의 인덱스. 이 코드에서는 쓰이지 않지만 다른데서 이 인덱스 값으로 선택한 행을 컨트롤 할 수 있음.
var idx = row.get("IDX"); //선택한 행에서 IDX라는 컬럼의 값을 가져옴
$("#pkid").val(idx);
$("#frm").attr("action", "Detial.do").submit(); //상세페이지로 넘어간다.
}
|
cs |
cellclick : grid의 셀을 클릭했을 때 발생하는 이벤트이다. 선택한 셀의 정보를 갖고 올 수 있다. 예를 들면 코드값을
클릭했을 때 controller에 있는 clickBtn함수를 호출하고 싶다 했을 때 아래와 같이 구현할 수 있다.
|
1
2
3
4
5
|
cellclick : function(grid, e, c, r){
if(c == 2){ //code는 두번쨰 컬럼이므로 2
controllerList.clickBtn(e);
}
}
|
cs |
나중에 rowclick과 cellclick을 이용하여 팝업(모달창)을 띄워 데이터를 주고받는 소스를 구현해 보겠다.
beforeedit : 마지막으로 소개할 beforeedit은 그리드안의 셀을 편집하기 전에 로딩이 되는 함수이다.
사실 이 포스팅은 이 함수를 소개하기 위해 썼다해도 과언이 아니다. b_cate가 대분류고 s_cate가 소분류이고 둘 다 에디터는 combobox이다. b_cate값을 선택할 때마다 s_cate의 콤보박스가 변경된다고 가정해보자.
이 함수가 실행되는 것은 s_cate셀을 선택했을 때이다. 이 때 같은 row의 b_cate값을 가져와서 storeSmallCate에 파라미터를 날려 새로 로딩을 한다. 그리고 s_cate는 콤보박스 에디터로 변경을 해준다.
예를 들어 대분류1을 선택했다면 b_cate값이 11이므로 b_cate값이 11인 1101,1102 소분류만 불러와서 s_cate 콤보박스 에디터에 셋팅이 될것이다.
* storeSmallCate는 실제로는 DB단의 쿼리로 구현해야한다. 위의 코드에 정의되어있는 store로는 실행되지 않는다.
|
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
|
beforeedit: function(f, c) {
var s_cate_obj = this.columns[4]; //소분류카테 객체
var thisdidx = c.rowIdx; //선택한 row 인덱스
var row = mainPanel.getStore().getAt(thisdidx, true); //선택한 row 객체
var b_cate = row.get("b_cate"); //선택한 row의 b_cate값
//소분류카테 store 리로드 * 소스상에는 그냥 로데이터로 store 셋팅이 되어있지만 실제로는 db에서 쿼리문 조건절에 b_cate값으로 질의할 수 있다고 가정
var store = storeSmallCate;
store.getProxy().setExtraParam("b_cate", b_cate);
store.removeAll();
store.load();
//소분류카테객체 에디터셋팅
var s_cateEditor = new Ext.form.ComboBox({
displayField: 'code_nm',
valueField: 's_cate',
editable: false,
forceSelection: false,
mode: 'local',
store: storeSmallCate, //위에서 대분류값으로 리로딩된 소분류 store
triggerAction: 'all',
renderer: function(val) {
var recordIndex = storeSmallCate.find('s_cate', val);
if (recordIndex === -1) {
return '선택';
}
return storeSmallCate.getAt(recordIndex).get('code_nm');
}
});
s_cate_obj.setEditor(s_cateEditor); //셋팅된 에디터를 소분류카테 객체에 셋팅한다.
}
|
cs |
위의 소스 코드의 store들은 실제로 쓰인 코드가 아니라 이 포스팅을 위해 임의로 작성한 것이다.
그래서 실제로 돌려보면 돌아가지 않을 수 있다. 이 점 참고하길 바라며 본인들 소스에 맞게 잘 수정해서 쓰시길 바람.
'extjs' 카테고리의 다른 글
| ExtJs 숫자 넘버 타입 xtype : numberfield 그리고 셀 연산 (0) | 2019.09.03 |
|---|---|
| ExtJs 셀렉트박스, 콤보박스 xtype:combobox (0) | 2019.09.02 |
| ExtJs 날짜타입 xtype : datefield (0) | 2019.09.02 |
| ExtJs 초간단 소개 (0) | 2019.08.30 |