ExtJS 기초강좌 21 - 그리드(Grid)의 Cell/Row 에디트 플러그인 비교

ExtJS 2015. 6. 22. 12:30

ExtjS의 Grid패널에서 지원하는 대표적인 에디트 플러그인이 2가지가 존재합니다.

그리드의 각 셀을 수정가능한 'CellEditing' 과 한 로우의 모든 셀을 한번에 수정가능한 'RowEditing' 플러그인을 예로 들수 있겠습니다.

이번장에서는 간단하게 각 플러그인들이 어떻게 지원되고, 사용하는지 알아보겠습니다.

※ DB연동은 CRUD 중, SELECT 쿼리만 사용하고, INSERT/UPDATE/DELETE 는 이후에 다루도록 하겠습니다.

DB 임의의 데이터는 19장에서 참부한 dummy.sql파일을 이용하도록 하겠습니다.

db연동을 하지 않으신 분들께서는 19장을 참고해주세요.

2015/06/19 - [ExtJS] - ExtJS 기초강좌 19 - 그리드(Grid) DB 통신하여 페이징처리하기

기존 그리드패널을 생성 후, DB 조회를 위한 서버페이지를 생성 후, 각 하단처럼 작성해주었습니다.

§ 매번 말씀드리지만, 서버페이지에 대한 부분은 각자 사용하시는 서버페이지에 맞춰 작성해주세요.

클라이언트 기본코드


Ext.onReady(function(){
	Ext.create('Ext.grid.Panel',{
		height : 300,
		title : 'Grid Editing Example',
		columns : [{
			text : '번호',
			flex : 1,
			dataIndex : 'pk'
		},{
			text : '제목',
			flex : 1,
			dataIndex : 'title'
		},{
			text : '내용',
			flex : 1,
			dataIndex : 'contents'
		},{
			text : '작성자',
			flex : 1,
			dataIndex : 'author'
		},{
			text : '등록일',
			flex : 1,
			dataIndex : 'create_date'
		}],
		store : Ext.create('Ext.data.Store',{
			autoLoad : true	,
			fields : ['title','contents','author','create_date'],
			proxy : {
				type : 'ajax',
				api : {
					read : './server2_select.jsp'
				},
				reader : {
					type : 'json',
					rootProperty : 'data'
				}
			}
		}),
		renderTo : Ext.getBody()
	})
})

서버페이지코드(server2_select.jsp)


Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try{
	JSONObject jsonObject = new JSONObject();
	JSONArray jsonArray = new JSONArray();
	JSONObject subObject =  null;
	
	int total = 0;
	
	/**
	*	JDBC 정보 설정 (MySQL)
	*/
	String url = "jdbc:mysql://localhost:3306/test";
	String id = "사용자아이디";
	String pwd = "패스워드";                             
	
	Class.forName("com.mysql.jdbc.Driver");
	conn=DriverManager.getConnection(url,id,pwd);
	stmt = conn.createStatement();
	
	/**
	*	목록조회 + 페이징
	*/
	String list_sql = "SELECT * FROM blog";
	rs = stmt.executeQuery(list_sql);
	
	while(rs.next()){
		subObject = new JSONObject();
		subObject.put("pk", rs.getString("idx"));
		subObject.put("title", rs.getString("title"));
		subObject.put("contents", rs.getString("contents"));
		subObject.put("author", rs.getString("author"));
		subObject.put("create_date", rs.getString("create_date"));
		jsonArray.add(subObject);
	}
	
	jsonObject.put("success", true);
	jsonObject.put("data", jsonArray);
	
	response.setContentType("text/plain; charset=UTF-8");
	PrintWriter pw = response.getWriter();
	pw.print(jsonObject);
	pw.flush();
	pw.close();
}catch(Exception e){
	e.printStackTrace();
}

19장과 20장에서는 DB쿼리에서 페이징을 이용했었는데, 이번장에서는 페이징을 제외하였습니다. 이번장에서는 페이징이 아닌, 에디트 플러그인을 위하여 포스팅하는 내용이기 때문입니다.

ExtJS 에서 그리드패널과 AJAX통신을 하여 서버페이지로부터 DB조회하여 응답한 목록데이터를 JSON으로 받아와서 출력하는 코드를 작성하였습니다.

그리드에 플러그인을 적용시키기 위해서는 'plugins' 라는 config 속성이 존재하는데 이 속성의 value 값에 사용할 플러그인을 생성하는 코드를 작성해주시면 되겠습니다.

그리드패널의 config 속성에 아래 코드를 추가해주세요.

CellEditing 플러그인 적용코드


plugins: [Ext.create('Ext.grid.plugin.CellEditing',{clicksToEdit: 1})],

§ 세미콜론에 유의하세요.

플러그인을 추가하였다고, 바로 적용되는것이 아닙니다.

'columns' config에 나열해준 컬럼들의 유형을 정의해주어야 합니다.

'editor' 라는 config 속성으로 컬럼타입들을 정의 해줄수 있습니다.

columns config 속성만을 본다면 아래와 같은 형태의 코드가 되겠습니다.▼

Columns 코드


columns : [{
			text : '번호',
			flex : 1,
			dataIndex : 'pk'
		},{
			text : '제목',
			flex : 1,
			dataIndex : 'title',
			editor: {
                allowBlank: false
            }
		},{
			text : '내용',
			flex : 1,
			dataIndex : 'contents',
			editor: {
				xtype : 'textarea',
                allowBlank: false
            }
		},{
			text : '작성자',
			flex : 1,
			dataIndex : 'author',
			editor: {
                allowBlank: false
            }
		},{
			text : '등록일',
			flex : 1,
			dataIndex : 'create_date',
			editor: {
				allowBlank: false
            }
}],

대부분 editor 속성의 자식 속성으로 alloBlank 만을 사용하고 내용컬럼에서 별도의 xtype이 지정되어있습니다.

이것은 만약 editor 자식 속성으로 별도의 xtype을 지정하지 않는다면, 기본으로