此實例是在我發表的“ 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添加搜索功能