PDA

View Full Version : Toolbar panel display



alsaihn
27 Jul 2009, 10:15 AM
Hello all.

I'm not sure if this issue belongs here or in bugs; feel free to move it there if appropriate.

I'm trying to add a panel to a toolbar and the html config item isn't rendering correctly in IE7. I am calling doLayout() on the toolbar after adding the panel. I've tried a few different scenarios and haven't been able to figure out why some work and some don't. Here's some code:

This panel displays correctly:


label = new Ext.Panel({
id: 'topicButton',
html: <a href="http://google.com" >test <IMG SRC="icon_dropdown.gif" /></a>',
border: false,
height: 25
});
with this html being generated:


<TD class=x-toolbar-cell id=ext-gen228>
<DIV class=" x-panel x-panel-noborder" id=topicButton>
<DIV class=x-panel-bwrap id=ext-gen229>
<DIV class="x-panel-body x-panel-body-noheader x-panel-body-noborder" id=ext-gen230 style="PADDING-LEFT: 5px; MARGIN-BOTTOM: 2px; PADDING-TOP: 2px; HEIGHT: 23px">
<A href="http://google.com/">test <IMG src="icon_dropdown.gif">
</A>
</DIV>
</DIV>
</DIV>
</TD>

In this panel, the word test is not visible, but the image is and there is enough space for the word before the image:


label = new Ext.Panel({
id: 'topicButton',
html: '<a href="http://google.com" class="searchMapButton">test <IMG SRC="icon_dropdown.gif" /></a> ',
border: false,
height: 25,
bodyStyle: 'padding-top:2px;padding-left:5px;margin-bottom:2px;'
});
with this html being generated:


<TD class=x-toolbar-cell id=ext-gen228>
<DIV class=" x-panel x-panel-noborder" id=topicButton>
<DIV class=x-panel-bwrap id=ext-gen229>
<DIV class="x-panel-body x-panel-body-noheader x-panel-body-noborder" id=ext-gen230 style="PADDING-LEFT: 5px; MARGIN-BOTTOM: 2px; PADDING-TOP: 2px; HEIGHT: 23px">
<A class=searchMapButton href="http://google.com/">test <IMG src="icon_dropdown.gif">
</A>
</DIV>
</DIV>
</DIV>
</TD>
The only difference I can see is that the apostrophies are getting stripped from the second example's class attribute, though I don't know why this would be the culprit. The x-panel-bwrap div also has no apostrophies and that class gets applied.

Any ideas?

Animal
27 Jul 2009, 10:27 AM
Why on earth would you add a Panel?

Do you just want an <a> element in the Toolbar?

Animal
27 Jul 2009, 10:28 AM
http://extjs.com/deploy/dev/docs/?class=Ext.BoxComponent

alsaihn
27 Jul 2009, 11:15 AM
I switched to using BoxComponents and it seems to be working now. I was using a Panel for 2 reasons: because I needed a 'block' element instead of an 'inline' element for styling purposes, and I wasn't just adding them to toolbars. The code I posted was one specific case of some generic panel creation code I use for a lot of similier panels being added to different locations. It just happened to work with Toolbars in 2.x so I left it alone.

I still find it odd that the second snippet above doesn't work in IE7 *shrug*