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

最新推荐文章于 2019-07-31 22:49:00 发布

iteye_12837

最新推荐文章于 2019-07-31 22:49:00 发布

阅读量214

点赞数

文章标签： xhtml ux json

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

Grid加载搜索功能，要注意的是：

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

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

效果图：

初始加载

输入查询条件后

HTML代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <htmlxmlns="http://www.w3.org/1999/xhtml">  
<head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>  
<title>SearchGrid-MHZG.NET</title> 
 <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>  
 <styletype="text/css">  
 #search-resultsa{  
color:#385F95; 
 font:bold11pxtahoma,arial,helvetica,sans-serif;  
text-decoration:none; 
 }  
 
 #search-resultsa:hover{  
text-decoration:underline; 
 }  
 
 #search-resultsp{  
margin:3px!important; 
} 
 
.search-item{ 
font:normal11pxtahoma,arial,helvetica,sans-serif; 
padding:3px10px3px10px; 
border:1pxsolid#fff; 
border-bottom:1pxsolid#eeeeee; 
white-space:normal; 
color:#555; 
} 
.search-itemh3{ 
display:block; 
font:inherit; 
font-weight:bold; 
color:#222; 
} 
 
.search-itemh3span{ 
float:right; 
font-weight:normal; 
margin:005px5px; 
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> 
 <scripttype="text/javascript"src="../../bootstrap.js"></script>  
 <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>  
 <scripttype="text/javascript"src="searchgrid.js"></script>  
</head> 
 
<body> 
 <divid="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' 
] 
}); 
 
 //创建数据源  
 varstore=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  
 vargrid=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:'ExtJS4SearchGrid-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的ORDERBY里即可。 
 start=Request("start")  
 limit=Request("limit")  
'查询时获取的参数。 
 query=Request("query")  
Ifstart=""Then
start=0 
EndIf
Iflimit=""Then
limit=50 
EndIf
 sorts=Replace(Trim(Request.Form("sort")),"'","")  
 dir=Replace(Trim(Request.Form("dir")),"'","")  
 
'测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。 
Ifquery="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
Dimcounts:counts=300  
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 
 
DimLs:Ls=Cint(start)+Cint(limit) 
IfLs>=countsThen
Ls=counts 
EndIf
 
 Echo("{")  
 Echo("""total"":")  
 Echo(""""&counts&""",")  
 Echo("""items"":[")  
Fori=start+1ToLs 
 Echo("{")  
 Echo("""title"":""newstitle"&i&"""")  
 Echo(",")  
 Echo("""author"":""author"&i&"""")  
 Echo(",")  
 Echo("""hits"":"""&i&"""")  
 Echo(",")  
 Echo("""addtime"":"""&Now()&"""")  
 Echo("}")  
 Ifi<LsThen 
 Echo(",")  
 EndIf 
Next
 
 Echo("]}")  
EndIf
FunctionEcho(str) 
Response.Write(str) 
EndFunction
%>