View Full Version : ExtJS grid search - minor issue

7 Jan 2011, 4:04 AM
hi peeps, one minor problem here..

basically i have a grid with the Ext.ux.grid.Search.js plugin. the code for the gridPanel is as follows:

var firstGrid = new Ext.grid.GridPanel({
width: 480,
height: 295,
ddGroup: 'secondGridDDGroup',
store: firstGridStore,
columns: cols,
enableDragDrop: true,
trackMouseOver: false,
loadMask: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'Stock list',
tbar: [], plugins: [new Ext.ux.grid.Search({
mode: 'local',
iconCls: 'icon-magnifier',
minLength: 1,
minChars: 1,
position: 'top',
autoFocus: true,
searchTipText: 'Search Tip Txt here',
showSelectAll: false
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })


The problem i am having is that, the icon-zoom is not showing up? on the search button. i referenced the css file for this and still the icon does not show up...

i have an image attachment and that is what the grid look like.. i need the icon to show up next to the searchbox.. i have no idea what the issue is.. please help if you can.. thanx 24158...

from the image you can see there is a little line just after the searchbox.. thats where the image is supposed to be..

please help if you can..

kind regards

7 Jan 2011, 4:25 AM
Is Ext.BLANK_IMAGE_URL configured correctly?

7 Jan 2011, 4:30 AM
hey man,

where does that code go?

i havent put that anywhere

7 Jan 2011, 4:51 AM
hey, right ive got something sorted.. ive managed to get the line removed after you mentioned the ext.blank image code... but i cant manage to get the icon for the search button.. plus as u can see, the border is going out of the grid.. can u help with that?

7 Jan 2011, 4:52 AM
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
(adjust for your own path the the s.gif image)

7 Jan 2011, 4:58 AM
hey, ive sorted that bit out.. but i cant seem to get the icon for the search button image.

7 Jan 2011, 5:02 AM
Make sure that the portion where the icon should be, is indeed classified with the class "icon-magnifier". Perhaps Ext converts it to x-search-icon-magnifier. Not sure. You'd have to check that out for your self.

For these kinds of debugging I would advise you to use WebDeveloper toolbar for Firefox, in combination with Firebug. Firebug might slow Ext down a bit, but it'll help you get down to the root of your problem with relative ease.

If this still doesn't work, you can always create a html: item before the TextField and simply input '<img src="magnifier.png" />'.

Good luck!

7 Jan 2011, 5:02 AM
Did you check if the image can actually be loaded from your server (correct path etc.)?

(try using the Firebug Net tab and check if any images have a 404 error)