이번에는 지난 포스팅에 이어서 그리드 페이징 처리 및
버튼 handler를 click 리스너 이벤트로 변경을 하여
컨트롤러에 담아보도록 해보겠습니다.
이전 강의에 이어서 진행하게 되므로
이전 포스팅을 우선 진행 하신다음
이어서 해당 포스팅을 참조하시면 되겠습니다.
2014/12/29 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5 MVC 구조를 이용한 간단 그리드 CRUD 알아보기(1)
그럼 기존 코드에서 약간 코드들을 수정해보면서 하단처럼 그리드 페이징처리와
버튼 클릭을 handler 가 아닌 컨트롤러에 클릭이벤트로 적용을 해보도로 하겠습니다.
Ext.define('mvc_study.view.grid.CustomGrid', { extend: 'Ext.grid.Panel', //xtype에 들어가는 컴포넌트 명칭이다. //widget. << 이부분을 제외한 나머지명칭을 xtype에 선언 해주면 됨 alias : 'widget.customGrid', title : '그리드 CRUD', //로우에디터를 사용하기 위한 플러그인 설정 plugins: [Ext.create('Ext.grid.plugin.RowEditing', { clicksToMoveEditor: 1, autoCancel: false })], columns : [ //idx 컬럼은 수정이불가하므로 editor 속성을 제거 //그외 title,name에만 editor 속성 허용 { text : '번호', flex : 1, dataIndex : 'idx' },{ text : '제목', flex : 1, dataIndex : 'title', editor: { xtype: 'textfield' } },{ text : '이름', flex : 1, dataIndex : 'name', editor: { xtype: 'textfield' } }], store : 'GridStore', dockedItems : [ { //페이징 툴바 xtype : 'pagingtoolbar', //그리드로부터 툴바생성위치 dock : 'bottom', //store store : 'GridStore', //정보 보여주기 false일 경우 하단속성은 필요없음 displayInfo : true, //보여주기 메시지(데이터 존재할때) displayMsg: '현재데이터 : {0} - {1} / 총데이터 : {2}', //데이터 존재하지 않을경우 emptyMsg: "데이터없음" } ], fbar : [{ xtype : 'button', text : '추가', id : 'addBtn' },{ xtype : 'button', text : '삭제', id : 'removeBtn' },{ xtype : 'button', text : '적용', id : 'applyBtn' }], initComponent: function() { this.callParent(); } });
위에 코드에 설명을 추가하자면 페이징 처리를 위하여
"pagingtoolbar" 컴포넌트를 dockedItems 속성내에 정의를 하였습니다.
MVC를 사용안하고 페이징 툴바에 관한 포스팅은 하단을 참고해주세요
2014/11/03 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기
autoLoad : true, 코드 다음에 하단 코드를 추가해줍니다.
pageSize: 3,
pageSize속성은 한페이지당 출력할 데이터 갯수를 의미합니다.
이어서 GridStore의 reader 자식 속성에 다음 코드를 추가합니다.
,totalProperty: 'totalCount'
reader의 자식속성에 존재하는 rootProperty와 동일하게
totalProperty에 정의된 속성값 역시 서버 페이지에서 응답받는 json의 key값과 동일하게 맞춰줍니다.
※ totalProperty는 원격서버로부터 페이징시 필요한 속성값이므로 기억해두도록 합니다.
★★★★★★
Ext.define('mvc_study.controller.MvcController', { extend: 'Ext.app.Controller', stores : ['GridStore'], views: ['grid.CustomGrid'], init: function() { this.control({ '#addBtn' : { click : this.addBtn }, '#removeBtn' : { click : this.removeBtn }, '#applyBtn' : { click : this.applyBtn } }); }, addBtn : function(btn){ //GridModel var rec = Ext.create('mvc_study.model.GridModel',{ title: '', name : '' }); //로우 추가 btn.up("grid").getStore().insert(0,rec); //에디트 포커스 btn.up("grid").plugins[0].startEdit(0, 0); }, removeBtn : function(btn){ //선택된 로우 삭제 btn.up("grid").getStore().remove(btn.up("grid").getSelectionModel().getSelection()); }, applyBtn : function(btn){ //각 row 마다 싱크를 맞춰주면서 btn.up("grid").getStore().sync({ //성공시 success: function( response ) { //그리드 select btn.up("grid").getStore().load(); } }); } });
MvcController에서 변경 및 추가된 점이 있다면
init의 this.controller부분에 CustomGrid에 선언한
버튼아이디셀렉터 : {
리스너이벤트명칭1(ex:click) : 함수명
리스터이벤트명칭2(ex:render) : 함수명
}
위처럼 선언이 되어있는데 이 구조 또한 기억해두도록 합니다.
그리고 함수명을 선언한 명칭으로 컨트롤러 영역에 선언한
함수명 : function(){
// 기능정의
}
처럼 지정을 해놓았습니다.
기능정의 부분은 이전에 선언한 CustomGrid 커스텀 컴포넌트의
버튼 handler 영역의 코드를 그대로 가져다 사용하였습니다.
간단하게 설명을 드려보자면
id가 "addBtn" 인 컴포넌트의 클릭이벤트 발생시 addBtn 함수 호출
id가 "removeBtn" 인 컴포넌트의 클릭이벤트 발생시 removeBtn 함수 호출
id가 "applyBtn" 인 컴포넌트의 클릭이벤트 발생시 applyBtn 함수 호출
형태로 동작이 되는 것입니다.
스크립트 코드수정이 이로써 마무으리!!가 되었습니다.
이어서 서버페이지 부분에 대한 코드를 재작성 해보도록 하겠습니다.
@RequestMapping("/listData") public @ResponseBody Map<String , Object> listData(HttpServletRequest request) throws SQLException { Map<String, Object> parameterMap = new HashMap<String, Object>(); Map<String, Object> resultMap = new HashMap<String, Object>(); //게시물 목록 수 조회 int totalCount = dao.totalCount(); //----클라이언트 페이지로부터 넘어온 parameter값들---- int start = Integer.parseInt(request.getParameter("start")); int end = Integer.parseInt(request.getParameter("limit")); //----클라이언트 페이지로부터 넘어온 parameter값들---- parameterMap.put("start", start); parameterMap.put("end", end); //게시물 목록 조회 ArrayList<Map<String, Object>> list = dao.listData(parameterMap); resultMap.put("success", true); resultMap.put("items", list); //그리드 페이징을 위한 필수 response json key 값 resultMap.put("totalCount", totalCount); return resultMap; }
DB호출하는 쿼리 페이지는 다음과 같이 변경 및 추가하였습니다.
<select id="totalCount" resultType="Integer"> SELECT COUNT(*) FROM grid </select> <select id="listData" parameterType="java.util.Map" resultType="java.util.Map"> SELECT idx,title, name FROM grid ORDER BY idx DESC LIMIT #{start}, #{end} </select>
INSERT/UPDATE/DELETE 로직은 변경사항이 없으므로 기능은 정의하지 않았습니다.
그럼 실행결과를 보도록 해보겠습니다.
정상적으로 컨트롤러 영역에 리스너 이벤트가 정상적으로 동작되는 것을 확인 하였습니다.
또한 그리드 페이징 처리 역시 잘 나오네요 ^^
by 개발로짜
ExtJS 강좌 - ExtJS5 MVC 구조를 이용한 간단 그리드 CRUD 알아보기(1) (13) | 2014.12.29 |
---|---|
Spring @ResposeBody를 이용하여 JSON Response 할때 IE에서 다운로드현상 해결법 (4) | 2014.12.07 |
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View/Controller + Model+Store 추가) (0) | 2014.11.26 |
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동) (2) | 2014.11.26 |
ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기 (1) | 2014.11.24 |