CheckItem menu icon problem

[franzisk]

I have this menu, but the icons in the CheckItem menu items are now being showed and (worse) I dont know how to use Firebug to debug where is the cause of the problem.


<link rel="stylesheet" type="text/css" href="../css/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../css/resources/css/grid.css" />
<link rel="stylesheet" type="text/css" href="../css/resources/css/ext-all.css" />

<link href="../css/themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="../css/themes/alphacube.css" rel="stylesheet" type="text/css" ></link>


var quickMenuItems = [
'<b class="menu-title">Quicksearch Columns</b>',
new Ext.menu.CheckItem({value:'screenName', text: 'Username', checked: true }),
new Ext.menu.CheckItem({value:'headline', text: 'Headline', checked: true }),
new Ext.menu.CheckItem({value:'id', text: 'Id', checked: false }),
new Ext.menu.CheckItem({value:'email', text: 'Email', checked: false }),
new Ext.menu.CheckItem({value:'password', text: 'Password', checked: false }),
new Ext.menu.CheckItem({value:'ip', text: 'IP', checked: false })
];

var quickMenu = new Ext.menu.Menu({
id: 'quickMenu',
items: quickMenuItems
});


http://www.kooky.com.br/shots/CheckItems.png

Anyone can help? ;)

[jsakalos]

It seems that menu items don't have right css class(es). On the Ext example page, the check menu items have this class: x-menu-check-item.

So explore rendered html with firebug and inspect css classes of items.

Hi,

[franzisk]

I found this:


<div id="ext-gen228" class="x-layer x-menu" style="position: absolute; z-index: 15000; visibility: visible; left: 483px; top: 39px;">
<a id="ext-gen231" class="x-menu-focus" tabindex="-1" onclick="return false;" href="#"/>
<ul id="ext-gen232" class="x-menu-list">
<li id="ext-gen236" class="x-menu-list-item">
<span id="ext-gen237" class="x-menu-text">
<b class="menu-title">Quicksearch Columns</b>
</span>
</li>
<li id="ext-gen238" class="x-menu-list-item x-menu-item-checked">
<a id="ext-gen239" class="x-menu-item x-menu-check-item" href="#">
<img class="x-menu-item-icon" src="../../resources/images/default/s.gif"/>
Username
</a>
</li>
<li id="ext-gen240" class="x-menu-list-item x-menu-item-checked">
<a id="ext-gen241" class="x-menu-item x-menu-check-item" href="#">
<img class="x-menu-item-icon" src="../../resources/images/default/s.gif"/>
Headline
</a>
</li>
<li id="ext-gen242" class="x-menu-list-item">
<a id="ext-gen243" class="x-menu-item x-menu-check-item" href="#">
<img class="x-menu-item-icon" src="../../resources/images/default/s.gif"/>
Id
</a>
</li>
<li id="ext-gen244" class="x-menu-list-item">
<a id="ext-gen245" class="x-menu-item x-menu-check-item" href="#">
<img class="x-menu-item-icon" src="../../resources/images/default/s.gif"/>
Email
</a>
</li>
<li id="ext-gen246" class="x-menu-list-item">
<a id="ext-gen247" class="x-menu-item x-menu-check-item" href="#">
<img class="x-menu-item-icon" src="../../resources/images/default/s.gif"/>
Password
</a>
</li>
<li id="ext-gen248" class="x-menu-list-item">
<a id="ext-gen249" class="x-menu-item x-menu-check-item" href="#">
<img class="x-menu-item-icon" src="../../resources/images/default/s.gif"/>
IP
</a>
</li>
</ul>
</div>

[grEvenX]

I'm having exactly the same problem with both Ext 1.1b1 and 1.1b2, and I haven't figured out the problem yet.

[fay]

Saki is right, it's your CSS class. Open ext-all.css, search for the x-menu-* entries, and double-check that the image URLs they are pointing at are correct.