PDA

View Full Version : ActionColumn iconCls does not render



LeonM
22 Oct 2010, 7:34 AM
Hi,

I use extjs 3.3.0, I have an editorGrid with an actionColumn. It all works just fine, except for icon redering using iconCls.

I use the icon set from extjsinaction.com, so icons are defined like this in the CSS:

.icon-arrow_left { background-image: url(icons/arrow_left.png) !important; }If I use:

iconCls: 'icon-arrow_left'The icon does not show.

But when I use the old fashion method:

icon : 'icons/arrow_left.png'The icon renders....

Is this a bug, or am I doing something wrong here?

Condor
22 Oct 2010, 7:42 AM
Did you specify the background-image in a .css file? Is this file located in a different directory from the .html file? In that case your path in the .css file would be wrong.

LeonM
22 Oct 2010, 7:45 AM
Did you specify the background-image in a .css file? Is this file located in a different directory from the .html file? In that case your path in the .css file would be wrong.

somewhere else in the same source (in a toolbar) I have a button, that also uses:


iconCls: 'icon-arrow_left'That one works just fine. The problem only seems to occur within the actionColumn...

Condor
22 Oct 2010, 7:52 AM
ActionColumn doesn't define a standard icon size, so you also need:

.x-action-col-cell img {
height: 16px;
width: 16px;
}
(assuming your images are 16x16px)

LeonM
22 Oct 2010, 7:56 AM
ActionColumn doesn't define a standard icon size, so you also need:

.x-action-col-cell img {
height: 16px;
width: 16px;
}
(assuming your images are 16x16px)

That did the trick!

Thanks for the fast response :)

melynam
7 Jan 2011, 9:46 AM
I'm experiencing a similar type of problem with my icons inconsistently rendering in my actioncolumn. I'm using a similar implementation as LeonM and with IE8 the icons are there. With Firefox 3.5.9 they are there except for the first row of my grid. With firefox 3.6.3 they are not rendering at all. Any ideas? I'm running ExtJS 3.3.1.

Condor
7 Jan 2011, 12:04 PM
Did you initialize Ext.BLANK_IMAGE_URL correctly?

melynam
7 Jan 2011, 12:21 PM
Here's how I have it defined relative to within my context.



Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Condor
7 Jan 2011, 11:25 PM
And I assume that you've verified with Firebug that s.gif is loaded correctly?

Can you poke the invisible icons with Firebug to see which css rule is causing them not to display?

melynam
10 Jan 2011, 9:09 AM
Yes. The s.gif image is loading. It's visible under the Net tab of firebug with a 200 status.

As you can see from my this being my 3rd post to the forum I'm quite new to ExtJS, and also still learning the benefits of Firebug, so when you say 'poke' I'm assuming that you mean click on the "arrow over the box" inspect icon next to the bug icon, then hover over the action column cell and click on it to reveal the underlying HTML.

When I do that I get the following:

<div unselectable="on" class="x-grid3-cell-inner x-grid3-col-2">
<img ext:qtip="Modify search" class="x-action-col-icon x-action-col-0 icon-modify "
src="../extjs/resources/images/default/s.gif" alt="">
<img ext:qtip="Delete search" class="x-action-col-icon x-action-col-1 icon-delete "
src="../extjs/resources/images/default/s.gif" alt="">
</div>
The grid for this column sits in a tab panel and the tab panel is in the west panel of a border layout. Another interesting behavior I just learned on Friday was that by collapsing that west panel of the border layout and then expanding the panel, the icons are rendered. Prior to collpasing/expanding, when I inspect the column in Firebug the image tags are faded in appearance.

Thanks for taking to time to consider this!

Condor
10 Jan 2011, 10:49 AM
Looks ok, no reason these icons wouldn't display.

What do you mean by 'faded'?

melynam
10 Jan 2011, 10:59 AM
Kind of like how a button looks when it's disabled. Implying to me that the code is there but disabled. After the collapse/expand events the image tags code looks as 'sharp' in contrast to other code, and the icons are there.