Question

ExtJS4 的grid,如何实现查询功能

Answer 1

弄个查询用户的信息的例子里，带分页的。通过调用servlet查询数据库返回用户的信息。web.xml配置了这个pageServlet。 这个的例子网上的有的是，你可以查一下呀。 首先在前台页面jsp里的javascript代码(部分) <script type="text/javascript" > //预加载 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); } ) </script> 下面pageServlet 代码。包自己引入public class pageServlet extends HttpServlet { 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(); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }