项目开发中,Grid组件少不了搜索功能,在Extjs4中,搜索组件以插件的形式出现,而且实现也非常简单,搜索组件位于examples/ux/form目录下,JS文件是SearchField.js。
Grid加载搜索功能,要注意的是:
1、开启延迟加载,即Ext.Loader.setConfig({enabled: true});
2、设置插件的目录:Ext.Loader.setPath('Ext.ux', '../../examples/ux'); ,需要注意,插件所在目录一定要正确,否则加载失败,就实现不了所要功能了。
效果图:
初始加载
输入查询条件后
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SearchGrid-MHZG.NET</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <style type="text/css"> #search-results a { color: #385F95; font:bold 11px tahoma, arial, helvetica, sans-serif; text-decoration:none; } #search-results a:hover { text-decoration:underline; } #search-results p { margin:3px !important; } .search-item { font:normal 11px tahoma, arial, helvetica, sans-serif; padding:3px 10px 3px 10px; border:1px solid #fff; border-bottom:1px solid #eeeeee; white-space:normal; color:#555; } .search-item h3 { display:block; font:inherit; font-weight:bold; color:#222; } .search-item h3 span { float: right; font-weight:normal; margin:0 0 5px 5px; width:100px; display:block; clear:none; } /*这里要注意这两张图片的路径要正确*/ .x-form-clear-trigger { background-image: url(../../resources/themes/images/default/form/clear-trigger.gif); } .x-form-search-trigger { background-image: url(../../resources/themes/images/default/form/search-trigger.gif); } </style> <script type="text/javascript" src="../../bootstrap.js"></script> <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="searchgrid.js"></script> </head> <body> <div id="demo"></div> </body> </html>
SearchGrid.js:
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../../examples/ux'); Ext.require([ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.util.*', 'Ext.data.*', 'Ext.ux.form.SearchField' ]); Ext.onReady(function(){ Ext.define('MyData',{ extend: 'Ext.data.Model', fields: [ 'title','author', //第一个字段需要指定mapping,其他字段,可以省略掉。 {name:'hits',type: 'int'}, 'addtime' ] }); //创建数据源 var store = Ext.create('Ext.data.Store', { //分页大小 pageSize: 50, model: 'MyData', //是否在服务端排序 remoteSort: true, proxy: { //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可 type: 'ajax', url: 'searchgrid.asp', reader: { root: 'items', totalProperty : 'total' }, simpleSortMode: true }, sorters: [{ //排序字段。 property: 'hits', //排序类型,默认为 ASC direction: 'DESC' }] }); //创建Grid var grid = Ext.create('Ext.grid.Panel',{ store: store, columnLines: true, columns: [ {text: "标题", width: 120, dataIndex: 'title', sortable: true}, {text: "作者", width: 140, dataIndex: 'author', sortable: false}, {text: "点击数", width: 100, dataIndex: 'hits', sortable: true}, {text: "添加时间", width: 150, dataIndex: 'addtime', sortable: true} ], height:400, width:520, x:20, y:40, title: 'ExtJS4 SearchGrid-Grid 搜索', disableSelection: true, loadMask: true, renderTo: 'demo', viewConfig: { id: 'gv', trackOver: false, stripeRows: false }, dockedItems: [{ dock: 'top', xtype: 'toolbar', items: { width: 300, fieldLabel: '搜索', labelWidth: 50, xtype: 'searchfield', store: store } }, { dock: 'bottom', xtype: 'pagingtoolbar', store: store, pageSize: 25, displayInfo: true, displayMsg: '显示 {0} - {1} 条,共计 {2} 条', emptyMsg: '没有数据' }] }) store.loadPage(1); })
代码完成了Grid组件异步加载信息、分页和搜索功能,可以满足一般使用情况了。
服务端代码,由于使用测试数据,这里只使用了最简单的方法来实现搜索效果,实际操作中,需要将查询条件置于SQL语句中,达到搜索效果。
SearchGrid.asp:
<% Response.ContentType = "text/html" Response.Charset = "UTF-8" %> <% '返回JSON数据,自定义一些测试数据。。 '这里的参数与EXT3.x相同,区别在于排序字段和排序方式使用了新的属性。 '由于这里是测试数据,接收的参数只用到了start,limit。sorts和dir在实际操作过程中,将之加入SQL的ORDER BY里即可。 start = Request("start") limit = Request("limit") '查询时获取的参数。 query = Request("query") If start = "" Then start = 0 End If If limit = "" Then limit = 50 End If sorts = Replace(Trim(Request.Form("sort")),"'","") dir = Replace(Trim(Request.Form("dir")),"'","") '测试数据,这里直接输出结果,实际应用中,应该把查询条件放到SQL语句中。 If query = "newstitle" Then Echo("{") Echo("""total"":") Echo("""1") Echo(""",""items"":[") Echo("{") Echo("""title"":""newstitle""") Echo(",") Echo("""author"":""author""") Echo(",") Echo("""hits"":""100""") Echo(",") Echo("""addtime"":"""&Now()&"""") Echo("}") Echo("]}") Else Dim counts:counts=300 '注意,这里的counts相当于Rs.RecordCount,也就是记录总数。 Dim Ls:Ls = Cint(start) + Cint(limit) If Ls >= counts Then Ls = counts End If Echo("{") Echo("""total"":") Echo(""""&counts&""",") Echo("""items"":[") For i = start+1 To Ls Echo("{") Echo("""title"":""newstitle"&i&"""") Echo(",") Echo("""author"":""author"&i&"""") Echo(",") Echo("""hits"":"""&i&"""") Echo(",") Echo("""addtime"":"""&Now()&"""") Echo("}") If i<Ls Then Echo(",") End If Next Echo("]}") End If Function Echo(str) Response.Write(str) End Function %>
至此,带搜索功能的Grid就全部完成了。