EXTJS4 Grid Filter 插件的使用

最新推荐文章于 2022-09-15 15:33:38 发布

zha_zi

最新推荐文章于 2022-09-15 15:33:38 发布

阅读量413

点赞数

分类专栏： JavaScript 文章标签： ux json

JavaScript 专栏收录该内容

200 篇文章

订阅专栏

本文详细介绍了如何在EXT4中使用grid过滤插件实现复杂的数据过滤，包括引入方法、样式配置及代码实现，解决常见问题，并通过示例展示最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

1：FiltersFeature

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

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

2：样式问题

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

 
 
Ext.define("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(){
					clearInterval(realtimeInterval);
				},
				afterrender:function(){
				 
					/**
					 * 定时刷新grid数据
					 */
					 var id=this.up().up().name;
					 realtimeInterval=  setInterval(function() { 
						  	store.loadData(filterPointArray(id,recArray));
						  
					 },2000);
				}
			}
		});
		this.callParent(arguments); 
		
	}
});

效果如下