`
dowhathowtodo
  • 浏览: 783882 次
文章分类
社区版块
存档分类
最新评论

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. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>SearchGrid-MHZG.NET</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <styletype="text/css">
  8. #search-resultsa{
  9. color:#385F95;
  10. font:bold11pxtahoma,arial,helvetica,sans-serif;
  11. text-decoration:none;
  12. }
  14. #search-resultsa:hover{
  15. text-decoration:underline;
  16. }
  18. #search-resultsp{
  19. margin:3px!important;
  20. }
  22. .search-item{
  23. font:normal11pxtahoma,arial,helvetica,sans-serif;
  24. padding:3px10px3px10px;
  25. border:1pxsolid#fff;
  26. border-bottom:1pxsolid#eeeeee;
  27. white-space:normal;
  28. color:#555;
  29. }
  30. .search-itemh3{
  31. display:block;
  32. font:inherit;
  33. font-weight:bold;
  34. color:#222;
  35. }

  37. .search-itemh3span{
  38. float:right;
  39. font-weight:normal;
  40. margin:005px5px;
  41. width:100px;
  42. display:block;
  43. clear:none;
  44. }
  45. /*这里要注意这两张图片的路径要正确*/
  46. .x-form-clear-trigger{
  47. background-image:url(../../resources/themes/images/default/form/clear-trigger.gif);
  48. }
  50. .x-form-search-trigger{
  51. background-image:url(../../resources/themes/images/default/form/search-trigger.gif);
  52. }
  53. </style>
  54. <scripttype="text/javascript"src="../../bootstrap.js"></script>
  55. <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
  56. <scripttype="text/javascript"src="searchgrid.js"></script>
  57. </head>

  59. <body>
  60. <divid="demo"></div>
  61. </body>
  62. </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. ]);

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

代码完成了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的ORDERBY里即可。
  9. start=Request("start")
  10. limit=Request("limit")
  11. '查询时获取的参数。
  12. query=Request("query")
  13. Ifstart=""Then
  14. start=0
  15. EndIf
  16. Iflimit=""Then
  17. limit=50
  18. EndIf
  19. sorts=Replace(Trim(Request.Form("sort")),"'","")
  20. dir=Replace(Trim(Request.Form("dir")),"'","")

  22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
  23. Ifquery="newstitle"Then
  24. Echo("{")
  25. Echo("""total"":")
  26. Echo("""1")
  27. Echo(""",""items"":[")
  28. Echo("{")
  29. Echo("""title"":""newstitle""")
  30. Echo(",")
  31. Echo("""author"":""author""")
  32. Echo(",")
  33. Echo("""hits"":""100""")
  34. Echo(",")
  35. Echo("""addtime"":"""&Now()&"""")
  36. Echo("}")
  37. Echo("]}")
  38. Else
  39. Dimcounts:counts=300
  40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

  42. DimLs:Ls=Cint(start)+Cint(limit)
  43. IfLs>=countsThen
  44. Ls=counts
  45. EndIf

  47. Echo("{")
  48. Echo("""total"":")
  49. Echo(""""&counts&""",")
  50. Echo("""items"":[")
  51. Fori=start+1ToLs
  52. Echo("{")
  53. Echo("""title"":""newstitle"&i&"""")
  54. Echo(",")
  55. Echo("""author"":""author"&i&"""")
  56. Echo(",")
  57. Echo("""hits"":"""&i&"""")
  58. Echo(",")
  59. Echo("""addtime"":"""&Now()&"""")
  60. Echo("}")
  61. Ifi<LsThen
  62. Echo(",")
  63. EndIf
  64. Next

  66. Echo("]}")
  67. EndIf
  68. FunctionEcho(str)
  69. Response.Write(str)
  70. EndFunction
  71. %>

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


分享到：
| ExtJS4学习笔记(九)---多表头Grid
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics