What's New?

[CLOSED] Panel does not render in FF correctly after removing & adding new components

  1. #1
    Apr 26, 2010, 2:08 AM

    [CLOSED] Panel does not render in FF correctly after removing & adding new components

    Please see the 2 attached screenshots. The code is completely client-side js without any server-side markup.

    Here I have a Desktop Window (card layout), having Report Options & Report Panel as 2 child panels.


    "Report Options" has its layout set to Form. I add controls to "Report Options" dynamically.


    The control added is either a simple checkbox, or a complex panel with many sub-controls (in the first screenshot, see the "Enter FareAllocation" for checkbox, and "Please enter your eye color" for the complex panel).


    The nested complex panel further has its Layout as row ("ux.row"). When the Report Template combobox changes on the top, I regenerate the "Report Options" panel. The top 1 combobox, and the bottom email report fields are left. All other fields are removed first, and then new fields are inserted using panel.insert(index, component).


    Everything works perfect in IE & Chrome. However, in FF, controls are rendered perfectly the first time. However, as soon as the "Report Template" combobox changes on top, and I remove & insert new controls, the complex panels I am referring are NOT rendered (Please see the second screenshot).


    I am confused here, and have no idea what's the problem.


    A point of interest might be that if I close the Desktop Window, and then reopen it, the controls are rendered correctly. However, as soon as the "Report Template" Combobox changes, and I recreate the controls, the problem arises again.
  2. #2
    Apr 26, 2010, 10:28 AM

    RE: [CLOSED] Panel does not render in FF correctly after removing & adding new components

    Hi,

    I am affraid that without test sample (which we can run locally) its going to be difficult to determine whats going wrong.
    Here is my test case. Can you modify it to demonstrate the issue.

    <%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" 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>Ext.NET Example</title>
    
    <script type="text/javascript">
        function buildSet1(){
            FormPanel1.removeAll();
            
            FormPanel1.add({
                xtype: "panel",
                height: 100,
                layout: "ux.row",
                items: [
                    {
                        xtype: "label",
                        text: "Set 1_1"
                    },
                    
                    {
                        xtype: "textfield"
                    },
                    
                    {
                        xtype: "panel",
                        height: 25,
                        items: [{
                            xtype: "checkbox",                        
                            boxLabel: "Checkbox1 (set1)"
                        }]
                    }
                ]
            });
            
            FormPanel1.add({
                xtype: "panel",
                height:100,
                layout: "ux.row",
                items: [
                    {
                        xtype: "label",
                        text: "Set 1_2"
                    },
                    
                    {
                        xtype: "textfield"
                    },
                    
                    {
                        xtype: "panel",
                        height: 25,
                        items: [{
                            xtype: "checkbox",                        
                            boxLabel: "Checkbox2 (set1)"
                        }]
                    }
                ]
            });
            
            FormPanel1.doLayout();
        }
        
        function buildSet2(){
            FormPanel1.removeAll();
            
            FormPanel1.add({
                xtype: "panel",    
                height:100,            
                layout: "ux.row",
                items: [
                    {
                        xtype: "label",
                        text: "Set 2_1"
                    },
                    
                    {
                        xtype: "textfield"
                    },
                    
                    {
                        xtype: "panel",
                        height: 25,
                        items: [{
                            xtype: "checkbox",
                            boxLabel: "Checkbox1 (set2)"
                        }]
                    }
                ]
            });
            
            FormPanel1.add({
                xtype: "panel",
                height:100,
                layout: "ux.row",
                items: [
                    {
                        xtype: "label",
                        text: "Set 2_2"
                    },
                    
                    {
                        xtype: "textfield"
                    },
                    
                    {
                        xtype: "panel",
                        height: 25,
                        items: [{
                            xtype: "checkbox",
                            boxLabel: "Checkbox2 (set2)"
                        }]
                    }
                ]
            });
            
            FormPanel1.doLayout();
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:FormPanel ID="FormPanel1" runat="server" Title="Form" Width="400" Height="400">
            <Buttons>
                <ext:Button runat="server" Text="Set 1" Handler="buildSet1" />
                <ext:Button runat="server" Text="Set 2" Handler="buildSet2" />
            </Buttons>            
        </ext:FormPanel>
    </form>
</body>
</html>
  3. #3
    May 02, 2010, 4:33 PM

    RE: [CLOSED] Panel does not render in FF correctly after removing & adding new components

    For others who google out this thread, the issue with my code was that I was NOT specifying the height when items were added to a Container managed by RowLayout.

    This worked when the Container with RowLayout was initially rendered. However, when adding items to this Container later after it was rendered, the items had their height collapsed. Specifying height of the items did the trick.


    It might be further interesting to note that doLayout() was also ineffective here, unless the height was specified on the items added using the .add method on the Container.

Similar Threads

  1. Render user control with ext.net components in controller (MVC)
    By Svr77 in forum 1.x Help
    Replies: 2
    Last Post: Nov 03, 2011, 12:32 PM
  2. [CLOSED] ComboBox not correctly render choosed
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2011, 2:20 PM
  3. [CLOSED] Removing and Re-adding ResourceManager
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 08, 2010, 11:32 AM
  4. [1.0] RowExpander can NOT Render Panel's buttons correctly
    By firebank in forum 1.x Help
    Replies: 0
    Last Post: May 29, 2010, 4:03 AM
  5. [CLOSED] Grid adding removing columns in codebehind
    By methode in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 24, 2009, 2:51 AM

Posting Permissions