J2EE Extjs4.0 Grid 페이지 표시

ExtJS는 프런트엔드 사용자 인터페이스를 만드는 데 주로 사용되는 기본 및
백그라운드
기술 관련 프런트엔드
ajax 프레임워크
.
기능이 풍부해서 아무도 그 오른쪽을 벗어날 수 없다.
인터페이스의 아름다움이든 기능의 강함이든 ext의
테이블 컨트롤
모두 1위를 차지하다.
단선 행, 다선 행, 선택한 행을 강조 표시하고, 드래그하여 열의 폭을 바꾸고, 열에 따라 정렬합니다. 이러한 기본 기능은 ExtJS 경량급으로 이루어집니다.
자동 생성
행호
, checkbox 지원
전체 선택
, 로컬 및 원격 지원 열 표시 동적 선택
페이지 나누기
옳다
셀
자신의 생각대로 과장하는 것도 생각할 수 있는 기능이다.
게다가 편집 가능
grid
, 새 줄을 추가하고, 하나 이상의 줄을 삭제하고, 여러 줄의 데이터를 제시하고, 드래그는grid의 크기를 바꾸고, grid 사이를 드래그하거나, 심지어tree와grid 사이를 드래그할 수 있습니다. 이런 기능은 정말 신기합니다.더욱 놀라운 것은 이런 기능들이 뜻밖에도 모두 ext에 있다는 것이다
테이블 컨트롤
실현되다.
사실 ext3부터 다양한 방식의 통계를 지원하고 컨트롤러가 excel 내보내기를 지원합니다.
 
 
index.jsp 페이지 코드:
 

  
    
    
    
	
	
	    
	
	
	
	 
	
	
	
	
	
	// 
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.data.*'
		 ]
		 
);

Ext.onReady(
		function(){
			// Model
			Ext.define(
					'User',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'name',mapping:'name'},
						        {name:'sex',mapping:'sex'},
						        {name:'age',mapping:'age'}
						]
					}
			)
			// 
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'User',
						
						// 
						pageSize:5,
						proxy: {
					        type: 'ajax',
					        url : 'pageServlet',
					        reader: {
								// json
					            type: 'json',
					            root: 'bugs',
					            // 
					            totalProperty: 'totalCount'
					        }
					    },
						autoLoad:true
					}
			);
			
			// grid
			var grid = Ext.create('Ext.grid.Panel',{
					store:store,
					columns:[
					         {text:' ',width:120,dataIndex:'name',sortable:true},
					         {text:' ',width:120,dataIndex:'sex',sortable:true},
					         {text:' ',width:120,dataIndex:'age',sortable:true}
					],
					height:200, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 Grid ', 
			        renderTo: 'grid', 
			       
			        // 
			        bbar: Ext.create('Ext.PagingToolbar', { 
			        	            store: store, 
			        	            displayInfo: true, 
			        	            displayMsg: '  {0} - {1}  ，  {2}  ', 
			        	            emptyMsg: " " 
			        	  }
			        ) 
				}
			)
			store.loadPage(1); 
		}
)



	
  
  
  
    

        
           
        
  

pageServlet 코드:
 

package xuyan;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class pageServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. 

	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		Connection con = null;  
		        PreparedStatement pstmt = null;  
		        ResultSet rs = null;  
		        String start = request.getParameter("start");  
		        String limit = request.getParameter("limit");  
		        StringBuilder sb = null;  
	        //   
		        int total = 0;  
		  
		        try {  
		            Class.forName("com.mysql.jdbc.Driver");  
		           con = DriverManager.getConnection(  
		                    "jdbc:mysql://localhost:3306/test", "root", "1234");  
		  
		        } catch (ClassNotFoundException e) {  
		            e.printStackTrace();  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
	          
		        //   
		       String countSql = "select count(*) from users";  
		        try {  
		            pstmt = con.prepareStatement(countSql);  
		            rs = pstmt.executeQuery();  
		            while(rs.next()){  
		                total = rs.getInt(1);  
		            }  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
		          
		        //   
		        String sql = "select * from users limit " + start + ", " + limit;  
		        try {  
		            pstmt = con.prepareStatement(sql);  
		            rs = pstmt.executeQuery();  
		            sb = new StringBuilder();  
		            // json   
		            sb.append("{totalCount:"+total+",bugs:[");  
		            while (rs.next()) {  
		                sb.append("{");  
		                sb.append("name:" + "\'" + rs.getString(1) + "\',");  
		               sb.append("sex:" + "\'" + rs.getString(2) + "\',");  
		                sb.append("age:" + "\'" + rs.getString(3) + "\'");  
		                sb.append("},");  
		            }  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
		        try {  
		            rs.close();  
		        } catch (SQLException e) {  
		            e.printStackTrace();  
		        }  
		        String json = sb.substring(0, sb.length() - 1);  
		        json += "]}";  
		          
		System.out.println(json);  
		        response.setContentType("text/html");  
		        response.setCharacterEncoding("UTF-8");  
		        try {  
		            response.getWriter().write(json);  
		            response.getWriter().close();  
		        } catch (IOException e) {  
		            e.printStackTrace();  
		        }  
		    }  

		
		//
		
	

	/**
	 * The doPost method of the servlet. 

	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}

}

web.xml 코드:
 

  
    This is the description of my J2EE component
    This is the display name of my J2EE component
    pageServlet
    xuyan.pageServlet
  

  
    pageServlet
    /pageServlet
  
  
    index.jsp