? ? ?EXT4 中提供的grid过滤插件，可以在列中直接过滤数据，文字等不同类型。

按照EXT提供的示例发现很难实现官方的功能，在google上搜索了一下发现有很多人包括国外的开发人员也遇到这样的问题

我按照官方提供的例子弄了一下第一遍也是没有成功，仔细分析了一下这东西的使用的EXT的普通控件有所不同。

?

1：FiltersFeature?

? ? ? ?这个东西需要单独引入一下，此类数据ux 扩展包，所以按照例子照搬是没有用的，首先需要重开发包中找到examples\ux 下的所有文件移到你需要的指定地址，然后倒入'Ext.ux.grid.FiltersFeature' 这个类即可

Ext.Loader.setPath('Ext.ux','/ext/ux'); ?//设置的命名空间路径

?

2：样式问题

? ? ?? <link rel="stylesheet" type="text/css" href="<%=path%>/ext/ux/grid/css/GridFilters.css" />

? ? ? ? <link rel="stylesheet" type="text/css" href="<%=path%>/ext/ux/grid/css/RangeMenu.css" />

?

最后就是按照例子中的代码写就可以实现其功能了。

/** 
 * Copyright (c) 2012, AEC, All rights reserved. FileName：RealtimePointGrid.js
 * Description：监控点的实时数据
 * 
 * @author Arthur.You Date:2012-05-17
 */
 
Ext.define("Delta.view.monitor.realtimedata.RealtimePointGrid",{
	extend:'Ext.grid.Panel', 
	alias:'widget.realtimepointgrid',
	initComponent:function(){ 
		var encode = false;
		var local = true;
		var filters = {
	        ftype: 'filters',
	        // encode and local configuration options defined previously for easier reuse
	        encode: encode, // json encode the filter query
	        local: local,   // defaults to false (remote filtering)
	
	        // Filters are most naturally placed in the column definition, but can also be
	        // added here.
	        filters: [
	            {
	                type: 'boolean',
	                dataIndex: 'visible'
	            }
	        ]
	    };
		
		var realtimeInterval=null; 
		var store=Ext.create('Ext.data.Store',{
			fields:['dotType','dotName','dotValue','alarmTime','alarmStatus','dataType','data','pointId','pointType']
			//data:recArray
		});
		Ext.apply(this, { 
			store:store,
			autoScroll:true,
			features: [filters],
			tbar:[ 
			      {xtype:'button',text:'查看设备故障',name:'btDeviceFault', icon:iconPath+'wrench_orange.png'}
			      ],
			columns:[
			         //new Ext.grid.RowNumberer({header:'编号',width:50}),
			         {xtype:'rownumberer',header:'编号',width:40,renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
			        	 return rowIndex+1;
			        	 }},
			         {text:'测点类型',width:200,sortable:true,dataIndex:'dotType', filterable: true},
			         {text:'测点名称',width:200,sortable:true,dataIndex:'dotName',filter: {
		                type: 'string'
		                // specify disabled to disable the filter menu
		                //, disabled: true
		             }},
			         {text:'监测值',width:150,sortable:true,dataIndex:'dotValue',renderer:function(value ,metaData ,record ){
			         	 return value+record.data.dotUnit;
			         }, filter: {
			                type: 'numeric'  // specify type here or in store fields config
			            }
			         },
			         {text:'告警时间',width:150,sortable:true,dataIndex:'alarmTime',    format: 'Y-m-d h:i:s'},
			         {text:'状态',width:200,sortable:true,dataIndex:'alarmStatus', filter: true,},
			         {	header:'操作',
				            xtype:'actioncolumn',
				            width:100,
				            items: [{
				                icon: './resources/images/warn.png',  // Use a URL in the icon config
				                tooltip: '告警确认',
				                style: {marginRight:'100px'}
				            },{
				                icon: './resources/images/edit.gif',  // Use a URL in the icon config
				                tooltip: '告警定位',
				                style: {marginRight:'100px'}
				            },{
				                icon: './resources/images/emos.png',  // Use a URL in the icon config
				                tooltip: '告警派单',
				                style: {marginRight:'100px'}
				            }]}
			         ],
			listeners:{
				destroy:function(){
					clearInterva