What's New?

[CLOSED] IE6 Rendering (resize) problem

  1. #1
    Sep 30, 2009, 12:12 PM

    [CLOSED] IE6 Rendering (resize) problem

    Hi,

    IE6 Rendering problems.

    1) When I resize the 'Navigation' to the right the ComboBox disapears.

    2) When I go to the second tab the ComboBox is not visible. </p>
    (Only when I set DeferredRender="false" do I see the ComboBox, but I still have problem (1))
    I don't want to use 'DeferredRender' for performance reasons.

    In the real application I have <ext:Anchor> containing grids and textartea which also show this behavior.

    What do I have to do extra to make it work correctly under IE6?

    Marc

    Example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormResize.aspx.cs" Inherits="InitializeCombo.WebFormResize" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple BorderLayout in Markup - Coolite Toolkit Examples</title>
   
</head>
<body>
    <ext:ScriptManager runat="server" />

    <h1>Simple BorderLayout in Markup</h1>
    
    <p>IE6 Rendering problems.</p>  
    
    <p> 1) When I resize the 'Navigation' to the right the ComboBox disapears.</p>
    
   <p> 2) When I go to the second tab the ComboBox is not visible. </p>
    <p>   (Only when I set  DeferredRender="false" do I see the ComboBox, but I still have problem (1)) </p>
    
    <p>What do I have to do extra to make it work  correctly under IE6?</p>
    
    <ext:Button 
        ID="Button1" 
        runat="server" 
        Text="Show Window" 
        Icon="Application">
        <Listeners>
            <Click Handler="#{Window1}.show();" />
        </Listeners>    
    </ext:Button>
        
    <ext:Window 
        ID="Window1" 
        runat="server" 
        Title="Simple Layout" 
        Icon="Coolite"
        Width="600" 
        Height="350"
        Border="false" 
        Collapsible="true"
        Plain="true">
        <Body>
            <ext:BorderLayout runat="server">
                <West Collapsible="true" MinWidth="175" Split="true">
                    <ext:Panel runat="server" Width="175" Title="Navigation" />
                </West>
                <Center>
                    <ext:TabPanel runat="server" ActiveTabIndex="0" >
                        <Tabs>
                            <ext:Tab 
                                ID="Tab1" 
                               runat="server" 
                                Title="First Tab" 
                                BodyStyle="padding: 6px;">
                                <Body>
                                <ext:Panel runat="server" Border="false"  AutoWidth="true" MonitorResize="true">
                                    <Body>
                                        <ext:FormLayout runat="server" >
                                            <ext:Anchor Horizontal="100%">
                                                <ext:ComboBox ID="cmbKRICataloguexxx"  FieldLabel="Catalogue" AllowBlank="false" Editable="false" Mode="Local"  TriggerAction="All"  DisplayField="kriCatalogueName" ValueField="kriCatalogueID" runat="server">
                                                </ext:ComboBox>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </body>
                                </ext:Panel>
                               </Body>
                            </ext:Tab>
                            <ext:Tab 
                                ID="Tab2" 
                                runat="server" 
                                Title="Another Tab" 
                                BodyStyle="padding: 6px;">
                                <Body>
                                <ext:Panel runat="server" Border="false"  AutoWidth="true" AutoRender="true">
                                <Body>
                                    <ext:FormLayout runat="server" >
                                        <ext:Anchor Horizontal="100%">
                                            <ext:ComboBox ID="cmbKRICatalogue"  FieldLabel="Catalogue" AllowBlank="false" Editable="false" Mode="Local"  TriggerAction="All"  DisplayField="kriCatalogueName" ValueField="kriCatalogueID" runat="server">
                                            </ext:ComboBox>
                                        </ext:Anchor>
                                    </ext:FormLayout>
                                </body>
                                </ext:Panel>
                                </Body>
                            </ext:Tab>
                            <ext:Tab 
                                ID="Tab3" 
                                runat="server" 
                                Title="Closeable Tab" 
                                Closable="true" 
                                BodyStyle="padding: 6px;">
                                <Body>Closable Tab</Body>
                            </ext:Tab>
                        </Tabs>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:Window>
</body>
</html>
  2. #2
    Sep 30, 2009, 12:23 PM

    RE: [CLOSED] IE6 Rendering (resize) problem

    Hi,

    Remove extra panel from Tabs (place FormLayout directly to the Tab's body) or wrap those extra panels by FitLayout
  3. #3
    Oct 01, 2009, 5:29 AM

    RE: [CLOSED] IE6 Rendering (resize) problem

    Hi,

    I managed to fix one problem with your advice, but I still have some problems with
    text area and grid.

    I made a new example.

    Main page

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormResize.aspx.cs" Inherits="InitializeCombo.WebFormResize" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<%@ Register src="~/WebFormResizeControl.ascx" tagname="wucFormResizeControl" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple BorderLayout in Markup - Coolite Toolkit Examples</title>
</head>
<body>
    <ext:ScriptManager runat="server" />

    <h1>Simple BorderLayout in Markup</h1>
    <p>IE6 Rendering problems.</p>  
    <p> 1) When I resize the 'Navigation' to the left the Text area's and grid disapears.</p>
    
    <ext:Button 
        ID="Button1" 
        runat="server" 
        Text="Show Window" 
        Icon="Application">
        <Listeners>
            <Click Handler="#{Window1}.show();" />
        </Listeners>    
    </ext:Button>
        
    <ext:Window 
        ID="Window1" 
        runat="server" 
        Title="Simple Layout" 
        Icon="Coolite"
        Width="600" 
        Height="350"
        Border="false" 
        Collapsible="true"
        Plain="true">
        <Body>
            <ext:BorderLayout runat="server">
                <West Collapsible="true" MinWidth="175" Split="true">
                    <ext:Panel runat="server" Width="175" Title="Navigation" />
                </West>
                <Center>
                    <ext:TabPanel runat="server" ActiveTabIndex="0" >
                        <Tabs>
                            <ext:Tab 
                                ID="Tab1" 
                                runat="server" 
                                Title="First Tab" 
                                BodyStyle="padding: 6px;">
                                <Body>
                                    <ext:BorderLayout runat="server">
                                    <North Split="true" MinHeight="60">
                                    <ext:Panel runat="server">
                                    <Body>
                                   
                                   <ext:FormLayout runat="server" >
                               <ext:Anchor Horizontal="100%">
                               <ext:ComboBox ID="cmbKRICatalo"  FieldLabel="Catalogue" AllowBlank="false" Editable="false" Mode="Local"  TriggerAction="All"  DisplayField="kriCatalogueName" ValueField="kriCatalogueID" runat="server">
                               </ext:ComboBox>
                               </ext:Anchor>
                               </ext:FormLayout>
                                    
                                   </Body>
                                    </ext:Panel>
                                    
                                    </North>
                                    <Center>
                                    <ext:Panel runat="server">
                                    <Body>
                                    
                                    <uc1:wucFormResizeControl runat="server" />
                                    
                                    </Body>
                                    </ext:Panel>
                                    </Center>
                                    </ext:BorderLayout>
                                </Body>
                            </ext:Tab>
                            <ext:Tab 
                                ID="Tab2" 
                                runat="server" 
                                Title="Another Tab" 
                                BodyStyle="padding: 6px;">
                                <Body>
                           <ext:FormLayout runat="server" >
                           <ext:Anchor Horizontal="100%">
                           <ext:ComboBox ID="cmbKRICatalogue"  FieldLabel="Catalogue" AllowBlank="false" Editable="false" Mode="Local"  TriggerAction="All"  DisplayField="kriCatalogueName" ValueField="kriCatalogueID" runat="server">
                           </ext:ComboBox>
                           </ext:Anchor>
                           </ext:FormLayout>
                                </Body>
                            </ext:Tab>
                            <ext:Tab 
                                ID="Tab3" 
                                runat="server" 
                                Title="Closeable Tab" 
                                Closable="true" 
                                BodyStyle="padding: 6px;">
                                <Body>Closable Tab</Body>
                            </ext:Tab>
                        </Tabs>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:Window>
</body>
</html>
    Control

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebFormResizeControl.ascx.cs" Inherits="InitializeCombo.WebFormResizeControl" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<ext:Store runat="server" ID="dsBusinessDimensions">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="businessDimensionID" Mapping="Business_Dimension_ID" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

<ext:FormLayout runat="server">
    <ext:Anchor Horizontal="100%">
        <ext:ComboBox ID="cmbKRICatalo"  FieldLabel="Catalogue" AllowBlank="false" Editable="false" Mode="Local"  TriggerAction="All"  DisplayField="kriCatalogueName" ValueField="kriCatalogueID" runat="server">
        </ext:ComboBox>
    </ext:Anchor>
    
    <ext:Anchor Horizontal="100%">
    <ext:Panel runat="server" Border="false"  AutoWidth="true">
    <Body>
     
     <ext:ColumnLayout runat="server" >
<ext:LayoutColumn ColumnWidth=".5">
<ext:Panel runat="server" Border="false" Header="false">
<Body>
<ext:FormLayout runat="server">
<ext:Anchor Horizontal="100%">
<ext:TextField ID="txtName" DataIndex="KRI_Name" AllowBlank="false" MsgTarget="Side" FieldLabel="Name" runat="server"/>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth=".5" >
<ext:Panel runat="server" Border="false" Header="false">
<Body>
<ext:FormLayout  runat="server">
<ext:Anchor Horizontal="100%">
<ext:TriggerField ID="trfOrganization" DataIndex="Organization_ID" runat="server" EnableViewState="false" FieldLabel="Organization" ReadOnly="true" AllowBlank="false">
</ext:TriggerField>
</ext:Anchor>
</ext:FormLayout>
<ext:Hidden ID="hdnOrganization" runat="server" />
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
    </Body>
    </ext:Panel>   
   </ext:Anchor>
    
    <ext:Anchor>
<ext:Panel runat="server" Border="false"  >
<Body>
<ext:FormLayout runat="server" >
<ext:Anchor Horizontal="100%">
<ext:TextArea runat="server" ID="txtDescription" DataIndex="Description" FieldLabel="Description" />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextArea runat="server" ID="txtCalculation" DataIndex="Calculation" FieldLabel="Calculation"/>
</ext:Anchor>
</ext:FormLayout>
</Body>
    </ext:Panel>
</ext:Anchor>
<ext:Anchor IsFormField="true">
<ext:GridPanel ID="grpBusinessDimensions" FieldLabel="Business Dimensions" StoreID="dsBusinessDimensions" runat="server" AutoWidth="true" Height="100" HideHeaders="true" DisableSelection="true">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button Icon="Pencil" Text="Select Business Dimensions" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:Column DataIndex="businessDimensionName"></ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true"></ext:GridView>
</View>
</ext:GridPanel>
    </ext:Anchor>
    
</ext:FormLayout>
  4. #4
    Oct 01, 2009, 7:03 AM

    RE: [CLOSED] IE6 Rendering (resize) problem

    Hi,

    You need to set Horizontal for Anchors which contain Grid and Panel with TextAreas

    1. TextAreas
    <ext:Anchor Horizontal="100%">
        <ext:Panel runat="server" Border="false">
            <Body>
                <ext:FormLayout runat="server">
                    <ext:Anchor Horizontal="100%">
                        <ext:TextArea runat="server" ID="txtDescription" DataIndex="Description" FieldLabel="Description" />
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                        <ext:TextArea runat="server" ID="txtCalculation" DataIndex="Calculation" FieldLabel="Calculation" />
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>
        </ext:Panel>
    </ext:Anchor>
    2. GridPanel
    <ext:Anchor IsFormField="true" Horizontal="99%">
        <ext:GridPanel ID="grpBusinessDimensions" FieldLabel="Business Dimensions" StoreID="dsBusinessDimensions"
    ......
    IE6 doesn't always correct handle Horizontal="100%" therefore if you expirience the problems with 100% (like in case with the grid) then try to decrease the value

Similar Threads

  1. Ext.net 2.0 Beta 3 of the window Resize problem
    By SeoNamseok in forum 2.x Help
    Replies: 0
    Last Post: May 31, 2012, 4:22 AM
  2. GridPanel resize problem
    By tiago in forum 1.x Help
    Replies: 2
    Last Post: Jul 20, 2011, 5:49 PM
  3. GridPanel resize problem
    By ozlemp in forum 1.x Help
    Replies: 3
    Last Post: May 26, 2011, 7:35 PM
  4. [CLOSED] anchor multifield resize problem
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 16, 2010, 12:03 PM
  5. [CLOSED] [1.0] Major resize problem!!!
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 24, 2010, 12:57 PM

Posting Permissions