PDA

View Full Version : [FIXED] [V0.6] HtmlEditor on TabPanel bug



oskarni
Aug 06, 2008, 11:57 AM
Hi guys, I've just detected a problem with the HtmlEditor when is used inside a TabPanel Tab in Firefox 3.0. (Coolite v0.5.4)

When you have this code:



<ext:BorderLayout ID="blyMyLayout" runat="server">
<East Split="true">
<ext:TabPanel ID="panEast" runat="server" Width="200px" Title="East">
<Tabs>
<ext:Tab ID="tab1" runat="server" Title="My tab">
<Content>
<ext:HtmlEditor ID="htmlEd" runat="server"></ext:HtmlEditor>
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</East>
<Center>
<Content>
</Content>
</Center>
</ext:BorderLayout>


And browse the page in Firefox 3.0 you get a text "false" inside the HtmlEditor and the control gets disabled without even touching it. It doesn't happen in IE7.

In Safari, the control doesn't even shows properly... the default contents (buttons on the control ribbon don't respect the control's width). When the width is not set (like in the code above) the buttons show but the text area doesn't. When you specify a width the text area shows with the proper width but disabled, and the buttons on the ribbon show even outside of th text area frame.

Hope this helps..

Cheers

Oscar

geoffrey.mcgill
Aug 06, 2008, 2:23 PM
The HtmlEditor "false" bug is caused by a bug in Safari and FireFox. The bug has been fixed in the next Toolkit release (v0.6).

With the current release (v0.5.x) the HtmlEditor must be visible on initial Page_Load. The HtmlEditor can not be hidden in a Tab, or a Window that is not visible on initial Page_Load.

You can work around the problem with your sample by setting the ActiveTab property to "0".

The following example demonstrates setting the ActiveTab property and adding the HtmlEditor to a FitLayout. The FitLayout will stretch the HtmlEditor to fill the available container and resize properly if the Container (Tab/TabPanel) is resize.

Example


<ext:TabPanel ID="panEast" runat="server" Width="200px" Title="East" ActiveTab="0">
<Tabs>
<ext:Tab ID="tab1" runat="server" Title="My tab">
<Content>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:HtmlEditor ID="htmlEd" runat="server" />
</ext:FitLayout>
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>

Hope this helps.