ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)

项目开发中,Grid组件少不了搜索功能,在Extjs4中,搜索组件以插件的形式出现,而且实现也非常简单,搜索组件位于examples/ux/form目录下,JS文件是SearchField.js。

Grid加载搜索功能,要注意的是:

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

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

效果图:


初始加载


输入查询条件后

 

HTML代码:

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>SearchGrid-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <style type="text/css">
  8.         #search-results a {
  9.             color: #385F95;
  10.             font:bold 11px tahoma, arial, helvetica, sans-serif;
  11.             text-decoration:none;
  12.         }
  13.         
  14.         #search-results a:hover {
  15.             text-decoration:underline;
  16.         }
  17.         
  18.         #search-results p {
  19.             margin:3px !important;
  20.         }
  21.         
  22.         .search-item {
  23.             font:normal 11px tahoma, arial, helvetica, sans-serif;
  24.             padding:3px 10px 3px 10px;
  25.             border:1px solid #fff;
  26.             border-bottom:1px solid #eeeeee;
  27.             white-space:normal;
  28.             color:#555;
  29.         }
  30.         .search-item h3 {
  31.             display:block;
  32.             font:inherit;
  33.             font-weight:bold;
  34.             color:#222;
  35.         }
  36.         .search-item h3 span {
  37.             float: right;
  38.             font-weight:normal;
  39.             margin:0 0 5px 5px;
  40.             width:100px;
  41.             display:block;
  42.             clear:none;
  43.         }
  44.         /*这里要注意这两张图片的路径要正确*/
  45.         .x-form-clear-trigger {
  46.             background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
  47.         }
  48.         
  49.         .x-form-search-trigger {
  50.             background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
  51.         }
  52.     </style>
  53. <script type="text/javascript" src="../../bootstrap.js"></script>
  54. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  55. <script type="text/javascript" src="searchgrid.js"></script>
  56. </head>
  57. <body>
  58. <div id="demo"></div>
  59. </body>
  60. </html>

SearchGrid.js:

 
  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux''../../examples/ux');
  3. Ext.require([
  4.     'Ext.grid.*',
  5.     'Ext.toolbar.Paging',
  6.     'Ext.util.*',
  7.     'Ext.data.*',
  8.     'Ext.ux.form.SearchField'
  9. ]);
  10. Ext.onReady(function(){
  11.     Ext.define('MyData',{
  12.         extend: 'Ext.data.Model',
  13.         fields: [
  14.             'title','author',
  15.             //第一个字段需要指定mapping,其他字段,可以省略掉。
  16.             {name:'hits',type: 'int'},
  17.              'addtime'
  18.         ]
  19.     });
  20.     
  21.     //创建数据源
  22.     var store = Ext.create('Ext.data.Store', {
  23.         //分页大小
  24.         pageSize: 50,
  25.         model: 'MyData',
  26.         //是否在服务端排序
  27.         remoteSort: true,
  28.         proxy: {
  29.            //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可
  30.             type: 'ajax',
  31.             url: 'searchgrid.asp',
  32.             
  33.             reader: {
  34.                 root: 'items',
  35.                 totalProperty  : 'total'
  36.             },
  37.             simpleSortMode: true
  38.         },
  39.         sorters: [{
  40.             //排序字段。
  41.             property: 'hits',
  42.             //排序类型,默认为 ASC
  43.             direction: 'DESC'
  44.         }]
  45.     });
  46.     
  47.     //创建Grid
  48.     var grid = Ext.create('Ext.grid.Panel',{
  49.         store: store,
  50.         columnLines: true,
  51.         columns: [
  52.                 {text: "标题", width: 120, dataIndex: 'title', sortable: true},
  53.                 {text: "作者", width: 140, dataIndex: 'author', sortable: false},
  54.                 {text: "点击数", width: 100, dataIndex: 'hits', sortable: true},
  55.             {text: "添加时间", width: 150, dataIndex: 'addtime', sortable: true}
  56.         ],
  57.         height:400,
  58.         width:520,
  59.         x:20,
  60.         y:40,
  61.         title: 'ExtJS4 SearchGrid-Grid 搜索',
  62.         disableSelection: true,
  63.         loadMask: true,
  64.         renderTo: 'demo',
  65.         viewConfig: {
  66.             id: 'gv',
  67.             trackOver: false,
  68.             stripeRows: false
  69.         },
  70.         dockedItems: [{
  71.             dock: 'top',
  72.             xtype: 'toolbar',
  73.             items: {
  74.                 width: 300,
  75.                 fieldLabel: '搜索',
  76.                 labelWidth: 50,
  77.                 xtype: 'searchfield',
  78.                 store: store
  79.             }
  80.         }, {
  81.             dock: 'bottom',
  82.             xtype: 'pagingtoolbar',
  83.             store: store,
  84.             pageSize: 25,
  85.             displayInfo: true,
  86.             displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
  87.             emptyMsg: '没有数据'
  88.         }]
  89.         
  90.     })
  91.     store.loadPage(1);
  92. })

代码完成了Grid组件异步加载信息、分页和搜索功能,可以满足一般使用情况了。

服务端代码,由于使用测试数据,这里只使用了最简单的方法来实现搜索效果,实际操作中,需要将查询条件置于SQL语句中,达到搜索效果。

SearchGrid.asp:

 
  1. <%
  2.     Response.ContentType = "text/html"
  3.     Response.Charset = "UTF-8"
  4. %>
  5. <%
  6. '返回JSON数据,自定义一些测试数据。。
  7. '这里的参数与EXT3.x相同,区别在于排序字段和排序方式使用了新的属性。
  8. '由于这里是测试数据,接收的参数只用到了start,limit。sorts和dir在实际操作过程中,将之加入SQL的ORDER BY里即可。
  9. start = Request("start")
  10. limit = Request("limit")
  11. '查询时获取的参数。
  12. query = Request("query")
  13. If start = "" Then
  14.     start = 0
  15. End If
  16. If limit = "" Then
  17.     limit = 50
  18. End If
  19. sorts = Replace(Trim(Request.Form("sort")),"'",""
  20. dir = Replace(Trim(Request.Form("dir")),"'","")
  21. '测试数据,这里直接输出结果,实际应用中,应该把查询条件放到SQL语句中。
  22. If query = "newstitle" Then
  23.     Echo("{")
  24.     Echo("""total"":")
  25.     Echo("""1")
  26.     Echo(""",""items"":[")
  27.     Echo("{")
  28.     Echo("""title"":""newstitle""")
  29.     Echo(",")
  30.     Echo("""author"":""author""")
  31.     Echo(",")
  32.     Echo("""hits"":""100""")
  33.     Echo(",")
  34.     Echo("""addtime"":"""&Now()&"""")
  35.     Echo("}")
  36.     Echo("]}")
  37. Else
  38. Dim counts:counts=300
  39. '注意,这里的counts相当于Rs.RecordCount,也就是记录总数。
  40. Dim Ls:Ls = Cint(start) + Cint(limit)
  41. If Ls >= counts Then
  42.    Ls = counts
  43. End If
  44. Echo("{")
  45. Echo("""total"":")
  46. Echo(""""&counts&""",")
  47. Echo("""items"":[")
  48. For i = start+1 To Ls
  49.    Echo("{")
  50.    Echo("""title"":""newstitle"&i&"""")
  51.    Echo(",")
  52.    Echo("""author"":""author"&i&"""")
  53.    Echo(",")
  54.    Echo("""hits"":"""&i&"""")
  55.    Echo(",")
  56.    Echo("""addtime"":"""&Now()&"""")
  57.    Echo("}")
  58.    If i<Ls Then
  59.      Echo(",")
  60.    End If
  61. Next
  62. Echo("]}")
  63. End If
  64. Function Echo(str)
  65.    Response.Write(str)
  66. End Function
  67. %>

至此,带搜索功能的Grid就全部完成了。

你可能感兴趣的:(sql,json,测试,url,query,ExtJs)