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

来源：互联网发布：centos系统版本命令编辑：程序博客网时间：2024/06/05 09:55

项目开发中，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'        }]    });//创建Gridvar 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 = "" Thenstart = 0End IfIf limit = "" Thenlimit = 50End Ifsorts = 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("]}")ElseDim counts:counts=300'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。Dim Ls:Ls = Cint(start) + Cint(limit)If Ls >= counts Then   Ls = countsEnd IfEcho("{")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 IfNextEcho("]}")End IfFunction Echo(str)   Response.Write(str)End Function%>

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