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

最新推荐文章于 2022-01-12 21:57:51 发布

nuoyan666

最新推荐文章于 2022-01-12 21:57:51 发布

阅读量4k

点赞数

分类专栏： extjs4.0 文章标签： extjs 测试 url query sql json

extjs4.0 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

项目开发中，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就全部完成了。

nuoyan666

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid）

项目开发中，Grid组件少不了搜索功能，在Extjs4中，搜索组件以插件的形式出现，而且实现也非常简单，搜索组件位于examples/ux/form目录下，JS文件是SearchField.js。Grid加载搜索功能，要注意的是：1、开启延迟加载，即Ext.Loader.
复制链接

扫一扫

专栏目录