EXTJS4.x之grid（1）

       Grid表格是ExtJS的核心组件之一，它提供了展示强大数据的最佳途径。在ExtJS4.x中该组件经过了完全的重构，变得更加快速、轻便并且更容易进行定制。Grid组件的重要特性包括：智能渲染、标准布局、数据视图、特性支持、虚拟滚动和编辑改进。

        Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

        使用grid控件实现数据的增删改成将会变得非常容易，下面我们用一个实例来说明。这个实例是一个用户管理界面，使用grid控件实现用户表的增删改查功能，后台采用jsp编写，数据库使用mysql，开发工具用的是Sencha Architect和myeclipse

 

1.先编写jsp代码，实现数据库的增删改成功能。
打开myeclipse新建web project，在WebRoot目录下新建grid目录。在grid目录下新建一个userControl.jsp的文件。

<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*"%>
<%
	Class.forName("com.mysql.jdbc.Driver").newInstance();
	Connection con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost/数据库名?useUnicode=true&characterEncoding=utf-8","用户名","密码");
   	Statement stmt=con.createStatement();
   	PreparedStatement pstmt;
   	ResultSet rst;
   	JSONArray jsonArray;
   	JSONObject jsonObj;
   	
   	int cmd = Integer.parseInt(request.getParameter("cmd"));
   	switch(cmd){
   	//列出所有数据
   	case 0:
   		rst=stmt.executeQuery("select * from user");
	    jsonArray = new JSONArray();
	    while(rst.next())
	    {
	    	jsonObj = new JSONObject();
	    	jsonObj.put("userId", rst.getString("userId"));
	    	jsonObj.put("userName", rst.getString("userName"));
	    	jsonObj.put("passWord", rst.getString("passWord"));
	    	jsonArray.add(jsonObj);
	    }
	    out.println(jsonArray.toString());
	    rst.close();
	    stmt.close();
	    con.close();
   	break;
   	//插入一个用户信息
   	case 1:
   		String sql = "INSERT INTO user (user.userName,user.passWord) VALUES (?,?)";
   		pstmt = con.prepareStatement(sql);
   		pstmt.setString(1, request.getParameter("userName"));
   		pstmt.setString(2, request.getParameter("passWord"));
	    jsonObj = new JSONObject();
   		if(pstmt.executeUpdate()>0){
	    	jsonObj.put("susses", true);	
		    jsonObj.put("msg", "添加成功");
   		}else{
	    	jsonObj.put("susses", false);	
		    jsonObj.put("msg", "添加失败");
   		}
	    out.println(jsonObj.toString());
	    pstmt.close();
	    con.close();
   	break;
   	//删除一个用户信息
   	case 2:
   		pstmt = con.prepareStatement("DELETE FROM user WHERE userId = ?");
   		int id = Integer.parseInt(request.getParameter("userId"));
   		pstmt.setInt(1, id);
	    jsonObj = new JSONObject();
   		if(pstmt.executeUpdate()>0){
	    	jsonObj.put("susses", true);	
		    jsonObj.put("msg", "删除成功");
   		}else{
	    	jsonObj.put("susses", false);	
		    jsonObj.put("msg", "删除失败");
   		}
	    out.println(jsonObj.toString());
	    pstmt.close();
	    con.close();
   	break;
   	//查询用户信息
   	case 3:
   		pstmt = con.prepareStatement("select * FROM user WHERE userName like ?");
   		pstmt.setString(1, "%"+request.getParameter("userName")+"%");
   		rst=pstmt.executeQuery();
	    jsonArray = new JSONArray();
	    while(rst.next())
	    {
	    	jsonObj = new JSONObject();
	    	jsonObj.put("userId", rst.getString("userId"));
	    	jsonObj.put("userName", rst.getString("userName"));
	    	jsonObj.put("passWord", rst.getString("passWord"));
	    	jsonArray.add(jsonObj);
	    }
	    out.println(jsonArray.toString());
	    rst.close();
	    pstmt.close();
	    con.close();
   	break;
   	}
%>

保存之后启动tomcat，可以现在浏览器上面验证一下接口有没正常工作，这里不说了。

2.创建数据库myssh，里面创建user表，顺便加上几条记录吧如下

3.开Sencha Architect，新建extjs4.1x工程，保存到javaWeb工程下的WebRoot目录下，工程名为grid。在设计窗口放入一个Viewport，然后在Viewport里面放一个GridPanel，如下图

4.创建一个UserModel，在左边控件视图找找到models找到model把它拖动右边工程视图的models中，并把userClassName改为UserModel

5.为UserModel增加字段，找到UserModel的fields并添加以下字段，userId，userName，passWord。这些是我们userControl返回的json中的字段，我们将用来显示

6.创建UserStore，在左边控件视图找找到data找到Store把它拖动右边工程视图的Stores，并把userClassName改为UserStore

配置一下UserStore

model：配置为UserModel

autoLoad：打上勾（自动加载数据）

autoSync：也打上勾（自动同步）

proxy：添加一个ajaxProxy

                设置MyAjaxProxy

                                             url：配置为userControl.jsp?cmd=0

7.配置MyGridPanel

store：选择为UserStore

Columns：先删除再添加三个

 

分别设置这个三个column

text：用户ID，用户名，密码

dataindex：分别选择为userId，userName，passWord

8.保存工程，刷新一下javaWeb工程，然后重启tomcat，打开浏览器，输入地址为http://localhost:8080/ssh/grid/app.html。如无意外我们将会看到下图界面

 

 

可以看到数据已经出来了，下面我们来实现数据的增删改查

9.为了简单起见我们直接拉一个TextField和三个button到viewport上面，并做以下配置

TextField：设置id为keyWord，设置fieldLable为“关键字” ，labelWidth为60。

三个button分别设置他们的text为“添加用户”，“删除用户”，“查找用户”。预览如下图

 

算了，增删改查在下一篇再实现了。