Grid Filter (Plugin)

[budaxlingga]

Hai all, i'm a newbie in programming. i just try some code from example given in internet.
I try to use grid filter plugin in my project, it worked until i type something to filter field, then nothing happen. i check the "filter" in firebug, and it contain nothing (filter:""). what happen?

what's wrong with my code?
this is my code
sorry for my bed english..

var phonebookStore = new Ext.data.DirectStore({
    storeId: 'phonebook-store',
    api: {
        read: Example.Phonebook.getall
    },
	
	
    paramsAsHash: true,
	 paramOrder:['start','limit','sort','dir','filter'],
	 baseParams:{ sort:'NAMA',dir:'ASC',filter:''},
	reader: new Ext.data.JsonReader({
		fields: ['NO','NIK','NAMA','PHONE_NUMBER','NAMA_GROUP','LOKER','ID_LEVEL','STATUS_USERS','EMAIL','ALAMAT','KOTA','ZIP','PROVINSI','PHONE_OFFICE','PRIORITAS'],
		root: 'data',
		idProperty:'NIK',
		totalProperty:'numrows',
		autoSave:false
	})
	
});

var filters=new Ext.ux.grid.GridFilters({
	encode:true,
	local:false,
	filters:[{
		type		: 'string',
		dataIndex	: 'NIK'
		},{
		type		: 'string',
		dataIndex	: 'NAMA'
		},{
		type		: 'string',
		dataIndex	: 'PHONE_NUMBER'
		},{
		type		: 'string',
		dataIndex	: 'LOKER'
	}]
})
 Ext.QuickTips.init();

var tpl=new
	Ext.XTemplate('	<div><b>Phone Office:</b>&nbsp;{PHONE_OFFICE}</div>',
					'<div><b>Email:</b>&nbsp;{EMAIL}</div>',
					'<div><b>Alamat:</b>&nbsp;{ALAMAT}</div>',
					'<div><b>Kota:</b>&nbsp;{KOTA}</div>',
					'<div><b>Provinsi:</b>&nbsp;{PROVINSI}</div>'
					);

var renderCell=function(val,cell,record){
	var qtip=this.tpl.apply(record.data);
	return '<div qtip="' + qtip + '">' + val + '</div>';
}

panel1 = new Ext.grid.GridPanel({
	title:'Phonebook',
	layout:'fit',
	loadMask: true,
	plugins:[filters],
	sm:new Ext.grid.RowSelectionModel({
	singleSelect:true,	
	listeners:{	
		rowselect:function(sm,index,record){
		varNik=record.get('NIK');
		varRecord=record;
		}
	}
	}),
	tbar:[
		{
			id:'add-button',
			iconCls:'addicon',
			text:'New',
			handler:function(){addUserWindow.show();
			groupDest.removeAll();
					}
		},
		'-'
		,
		{
		text:'Delete',
		iconCls:'deleteicon',
		id:'delete-button',
		handler:function(){
		if (varNik!=""){
		Example.Phonebook.hapus(varNik,function(result){
		if (result){
		Ext.Msg.alert("Delete User","Delete User Berhasil");}
		});
		phonebookStore.reload();
		} else{
		Ext.Msg.alert('Invalid','Please select a row first!');
		}
		}
		
		}		
	],	
	bbar: new Ext.PagingToolbar({
		store		: phonebookStore,
		displayInfo	: true,
		pageSize	: 100,
		plugins		: [filters],
		prependButtons: true,
		displayMsg:'Displaying phonebook {0} - {1} of {2}'
	}),
	store:phonebookStore,
	columns:[
	{
		header   :'No', 
		width    : 35, 
		sortable : true,
		renderer : this.renderCell.createDelegate(this),
		dataIndex: 'NO'
	},
	{
		id       :'nik',
		header   :'Nik', 
		width    : 75, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		filterable:true,
		dataIndex: 'NIK'
	},
	{
		header   :'Nama', 
		width    : 175, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		filterable:true,
		dataIndex: 'NAMA'
	},
	{
		header   :'No Hp', 
		width    : 100, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		filterable:true,
		dataIndex: 'PHONE_NUMBER'
	},
	{
		header   :'Groups', 
		width    : 275, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		filter	:{type: 'string', disable:true},
		dataIndex: 'NAMA_GROUP'
	},
	{
		header   :'Loker', 
		width    : 175, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		filterable:true,
		dataIndex: 'LOKER'
	},
	{
		header   :'Level User', 
		width    : 100, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		dataIndex: 'ID_LEVEL'
	},
	{
		header   :'Status', 
		width    : 70, 
		sortable : true, 
		renderer : this.renderCell.createDelegate(this),
		dataIndex: 'STATUS_USERS'
	}]
});

[budaxlingga]

i have another problem now, why my filter always late in send the parameter. It send the previous parameter, not recent parameter.

[luisoswaldo]

I have a problem with icons

The problem is that the icons out mounted above each other in the case of numeric fields. And the image of the text fields (find image) only appears in firefox and not in other browsers.

I leave you a screenshot of the problem

filter.JPG

So I add the style sheets. It is necessary to do something else?

<style type="text/css" title="currentStyle" media="screen">
        @import "lib/extjs/resources/css/ext-all.css";
        @import "lib/extjs/plugins/GridFilter/resources/style.css";

        .x-grid3-hd-row td.ux-filtered-column {   
        font-style: italic;  
        font-weight: bold;
    }        
    </style>

//In onReady

Ext.onReady(function(){
    
    Ext.QuickTips.init();
    
    Ext.ux.menu.RangeMenu.prototype.icons = {
          gt: 'lib/extjs/plugins/GridFilter/resources/greater_then.png', 
          lt: 'lib/extjs/plugins/GridFilter/resources/less_then.png',
          eq: 'lib/extjs/plugins/GridFilter/resources/equals.png'
    };
    Ext.ux.grid.filter.StringFilter.prototype.icon = 'img/find.png';

Appreciate any help I can offer.

[luisoswaldo]

In firebug when you select the icon shows the following code, which is strange I do not put the url to the image name. Screenshot attached.

[jago7372]

Hi,
please someone help me with filter icons appear over each other I am concerned ExtJS 3.1.1 thank....



error_filtro.jpg

[jankshtt]

Hi,

I am filter on a grid and I am trying to run the filter on it. I want o run the filter from code when a user selects a value from a drop down else where in the page.

I see that grid.getFilter('dataIndex').setActive(true) is setting the filter active but i am not sure how to set the value. There is a methid called setValue() but it is a private methos. Is there any way i could do it.

Thanks,
Jankshtt

[SunWuKung]

I am saving and restoring a grid's state that includes a GridFilter.
All works fine until a DateFilter is set in which case I get a value.clearTime is not a function error in DateFilter.js line 216 - this.fields[key].menu.picker.setValue(value[key]);

I guess it's because the value is not a Date object and I can see that here it was suggested to use Date.parseDate - but since in my case the value is created by saving the same DateFilter's state I don't think this is an option here.

How could I get this work?
For the time being I am doing this in DateFilter.js and it seems to work, but any comment is welcome:

setValue : function (value, preserve) {
var key;
for (key in this.fields) {
if(value[key]){
if (!Ext.isDate(value[key])){
value[key]=Date.parseDate(value[key],this.dateFormat) ;
}
this.fields[key].menu.picker.setValue(value[key]);
this.fields[key].setChecked(true);
} else if (!preserve) {
this.fields[key].setChecked(false);
}
}
this.fireEvent('update', this);
}

[vbreader]

I am saving and restoring a grid's state that includes a GridFilter.
All works fine until a DateFilter is set in which case I get a value.clearTime is not a function error in DateFilter.js line 216 - this.fields[key].menu.picker.setValue(value[key]);

I guess it's because the value is not a Date object and I can see that here it was suggested to use Date.parseDate - but since in my case the value is created by saving the same DateFilter's state I don't think this is an option here.

How could I get this work?
For the time being I am doing this in DateFilter.js and it seems to work, but any comment is welcome:

Thank you for the code. It works like a charm.

[donremigio]

Hi
How I can hide from numeric filter equal field. I can delete from RangeMenu.js fields.eq, but I need to hide it only from search filter from one column in grid.

[ecko]

Yeah, I asked the Ext team about support for scrolling menus and they said not in this version >.<

while i agree that too many menu items would be cumbersome, on screens with even moderately low resolution (1280 x), the column menu would extend past the bottom of the screen and be inaccessible with fewer columns than that. I would like to extend this to include a scrolling option. Where can i find the latest source?
(see attached for example)
Untitled-1.jpg