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

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


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

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


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

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


    기존 그리드패널을 생성 후, 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을 지정하지 않는다면, 기본으로

    xtype : 'textfield'

    가 되겠습니다.

    위 코드에서 내용만 컬럼타입이 textarea 가 되는것이고, 그외의 나머지 컬럼들을 textfield 타입이 되는 것입니다.

    allowBlank 를 false로 지정해준 이유는 

    '속성에 정의된 내용 자체로 해당 컬럼에 공백을 허용하지 않는다.'

    라는 것입니다.

    그외의 editor 속성내에 정의되는 자식속성들이 많이 존재하지만, 이번 목적은 각 에디트 플러그인을 어떻게 사용하는지에 대해서 알기위함이기 때문이므로, 생략하도록 하겠습니다.

    위와같이 작성을 하셨다면, 실행을 해보도록 하겠습니다.


    CellEditing 실행



    셀을 클릭할때마다 수정이 가능하게끔, 에디트 플러그인이 정상적으로 동작이 됩니다.

    질문 : 왜 번호컬럼은 클릭하면 적용이 되지 않는건가요?

    답 : 코드를 보면, edit 속성이 정의되지 않았기 때문입니다.


    지금까지 작성한 코드에서 일부만을 수정하여 RowEditing 플러그인을 적용해보도록 하겠습니다.

    방금 적용한 plugins 속성의 정의된 Ext.grid.plugin.CellEditing클래스를 Ext.grid.plugin.RowEditing로 변경해주세요

    실행을 해줍니다.


    RowEditing 실행



    RowEditing 플러그인이 적용된 화면이 출력됩니다.

    실행화면을 보면, CellEditing 플러그인과 다르게, 셀내용을 수정을 한다고 적용이 되는것이 아닙니다.

    'Update' 버튼을 클릭해주셔야 최종적으로 적용이 되는것입니다. ▼

    수정된 컬럼을 보면 컬럼의 좌측상단에 작은 빨간화살표가 나타나는데, 

    이 컬럼이 수정되었다. 기존 내용과 다르다

    라는 의미를 가졌습니다.

    이런 컬럼들을 기존 데이터에서 변경을 해주기위해서는 sync를 맞춰주어야 하는데 이부분에 대해서는 다음장에 예제를 통해서 적용해보도록 하겠습니다.

    다음장은 CellEditing 플러그인을이용하여 수정된 컬럼데이터를 DB에 즉시반영하고, 원복하는 예제를 포스팅하도록 하겠습니다.



    신고
    Posted by 몽고