PDA

View Full Version : Missing filter icons after migrating from Ext JS 2.x to 3.1.1



elbino
22 Oct 2010, 5:37 AM
Hallo there,

I had to migrate an application from ExtJS 2.x to 3.1.1. This works now but I recognized that the grid filter icons are not shown anymore. The code is the usual used one, I think:


Ext.onReady(function() {
/* Store changes to grid, etc. in a cookie. */
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.ux.menu.RangeMenu.prototype.icons = {
gt: '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/greater_then.png',
lt: '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/less_then.png',
eq: '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/equals.png'
};
Ext.ux.grid.filter.StringFilter.prototype.icon = '/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/find.png';
...

I tried to find the icons manually in the browser. This works, so I'm sure they exist on the server. Does anyone know this kind of problem?

Thanks & greetings
Thomas

Condor
22 Oct 2010, 6:07 AM
The Ext 3 GridFilters works with iconCls and not with icon.

elbino
22 Oct 2010, 6:17 AM
Does this mean I simply have to modify the code? (prototype.icon to iconCls and what about prototype.icons?)

Condor
22 Oct 2010, 6:22 AM
No, iconCls holds a css class name and you need to have a css rule for this class name that specifies a background-image.

elbino
22 Oct 2010, 6:25 AM
Ah, okay. I do not have to change the code but build up a css rule? Hm, do you have an example how to build up such a rule? Thanks! :-)

Condor
22 Oct 2010, 6:27 AM
Do you want this for all gridfilters? In that case you could just replace the default iconCls:

.ux-gridfilter-text-icon {
background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/find.png) !important;
}
.ux-rangemenu-gt {
background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/greater_then.png) !important;
}
.ux-rangemenu-lt {
background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/less_then.png) !important;
}
.ux-rangemenu-eq {
background-image: url(/serv/servlet/Repository/Root/KPortal/extjs/examples/grid-filtering/img/equals.png) !important;
}

elbino
22 Oct 2010, 6:30 AM
Thanks! :-) This is for the string filter, only? Do I have to build up css rules for the other grid filters, too? Think so. Hm, so the rule for the string filter is called ux-gridfilter-text-icon. How can I find the names for the other icons (greater_then.png, etc...)?

elbino
22 Oct 2010, 6:36 AM
Uh, thanks a lot!!! :-)

elbino
22 Oct 2010, 6:43 AM
Uh, but this has a bug, I think. Now the filters for number columns look like this:

22982

What's that now?

Condor
22 Oct 2010, 6:58 AM
These are all the images you have to specify, in the correct order:

.ux-filtered-column.sort-asc .x-grid3-sort-icon {
background-image: url(../images/sort_filtered_asc.gif) !important;
}
.ux-filtered-column.sort-desc .x-grid3-sort-icon {
background-image: url(../images/sort_filtered_desc.gif) !important;
}
.ux-gridfilter-text-icon {
background-image: url(../images/find.png) !important;
}
.ux-rangemenu-gt {
background-image: url(../images/greater_than.png) !important;
}
.ux-rangemenu-lt {
background-image: url(../images/less_than.png) !important;
}
.ux-rangemenu-eq {
background-image: url(../images/equals.png) !important;
}

elbino
22 Oct 2010, 7:16 AM
Unfortunately this did not help. :-( Do I have to delete the code which I posted in the snippet above?
BTW: The css rules for "sort filtering asc" and "desc" do work without adding a rule. But with the other ones it's as shown in the screenshot.

Condor
22 Oct 2010, 7:18 AM
Are you actually including GridFilters.css and RangeMenu.css?

elbino
22 Oct 2010, 7:23 AM
Hm, no I do not. At least Firebug tells me so. Ahhh, I simply have to include them?

KingDuck
21 May 2013, 9:21 AM
I included those two CSS files and it fixed my problem. Adding those styles let me change the icons as well.