Extjs4---grid添加搜索功能

此实例是在我发表的“ Extjs4---grid+servlet分页查询 ”上添加的搜索功能，基本功能已经实现，但是存在乱码问题，希望有大师指导解决乱码问题

在 Extjs4 中，搜索组件以插件的形式出现，而且实现也非常简单，搜索组件位于 examples/ux/form 目录下， JS 文件是 SearchField.js 。

Grid 加载搜索功能，要注意的是：

1 、开启延迟加载，即 Ext.Loader.setConfig({enabled:true});

2 、设置插件的目录： Ext.Loader.setPath('Ext.ux','../../examples/ux'); ，需要注意，插件所在目录一定要正确，否则加载失败，就实现不了 所要功能了。

html代码：

和“ Extjs4---grid+servlet分页查询 ”代码相同这里就不贴了

searchGrid.js代码：

    //下面两行代码必须要，不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example/ext4/examples/ux');

//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.util.*',
		 	'Ext.data.*',
		 	//注意引用
		 	'Ext.ux.form.SearchField'
		 ]
		 
);

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 : 'users',
					        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', 
			       
			        dockedItems:[
			                     //添加搜索控件
			                     {
			                    	 dock:'top', 
                    	 xtype:'toolbar', 
                    	 items:{ 
                    	 width:200, 
                    	 fieldLabel:'搜索姓名', 
                    	 labelWidth:70, 
                    	 xtype:'searchfield', 
                    	 store:store 
			                     	}
			                     },{ 
                    	 dock:'bottom', 
                    	 xtype:'pagingtoolbar', 
                    	 store:store, 
                    	 displayInfo:true, 
                    	 displayMsg:'显示{0}-{1}条，共计{2}条', 
                    	 emptyMsg:'没有数据' 
			                    }
			        ],
				}
			)
			store.loadPage(1); 
		}
)


  

后台Servlet.java代码

    package servlet;

import java.io.IOException;
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;

/*
 * @author 刘畅
 */

public class Servlet extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//在这里已经设置编码但是还是有乱码出现
		req.setCharacterEncoding("UTF-8");
		//System.out.println(req.getCharacterEncoding());
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String start = req.getParameter("start");
		String limit = req.getParameter("limit");
		StringBuilder sb = null;
		String query = req.getParameter("query");
//此处会输出乱码，求高人解决		
System.out.println(query);
		//数据总数
		int total = 0;

		try {
			Class.forName("com.mysql.jdbc.Driver");
			con = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/user", "root", "123456");

		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		//sql语句
		String countSql = "select count(*) from users";
		String selectSql = "select * from users limit " + start + ", " + limit;
		//如果有搜索条件则会把条件添加到sql语句中
		if(query!=null){
			countSql+=" where name='"+query+"'";
			selectSql="select * from users where name='"+query+"' limit " + start + ", " + limit;
		}
		
		//查询总数
		try {
			pstmt = con.prepareStatement(countSql);
			rs = pstmt.executeQuery();
			while(rs.next()){
				total = rs.getInt(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		//分页查询
		try {
			pstmt = con.prepareStatement(selectSql);
			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);
		resp.setContentType("text/html");
		resp.setCharacterEncoding("UTF-8");
		try {
			resp.getWriter().write(json);
			resp.getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

}

  

效果图：

查询姓名为“1”的：

Extjs4---grid添加搜索功能