Body null error

  1. #1

    Body null error

    I have a complex form inside a window and I need to add fields to the form at run time on the click of a button. For example I have 5 address fields and I have a button 'Add Another Address' which should insert another 5 address fields into the form. I have a function which creates the required fields and adds them to the form fieldset. I am getting the error :

      this.body is null
        this.body.addClass(this.bodyCls + '-noheader');
    The function that adds the Address Fields and the Form are as follows :

        addAddressFields: function() {
            var addressFields = new Ext.Panel({
                title: 'Additional Address',
                bodyBorder: false,
                bodyStyle: 'background: none; padding : 8px 0',
                items: new Ext.FormPanel({
                    layout: 'column',
                    items: [
                        {
                            columnWidth: 0.5,
                            defaultType: 'textfield',
                            items: [
                                    {
                                        fieldLabel: 'Address Line 1',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    },
                                    {
                                        fieldLabel: 'Address Line 2',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    }, {
                                        fieldLabel: 'Town',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    }, {
                                        fieldLabel: 'Postcode',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    }
                                ]
    
                        }, {
    
                            columnWidth: 0.5,
                            defaultType: 'textfield',
                            items: [
                                    {
                                        fieldLabel: 'Address Line 3',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    },
                                    {
                                        fieldLabel: 'Address Line 4',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    }, {
                                        fieldLabel: 'County',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    }, {
                                        fieldLabel: 'Country',
                                        width: 130,
                                        labelStyle: 'padding-left:8px;font-weight:bold'
                                    }
                                ]
    
                        }
                    ]
                })
            });
    
            OrgEntityAddressFieldSet.add(addressFields);
            OrgEntityAddressFieldSet.doLayout();
        },
    The Window/Form

        <ext:Window 
            ID="EditOrgEntityWindow" 
            runat="server" 
            show&#111;nload="false" 
            Collapsible="true" 
            Resizable="true" 
            Icon="ApplicationDouble"  
            Title="Add New Organisational Entity" 
            Width="630"  
            Height="450" AutoScroll="true" 
            Constrain="true" 
            Modal="true" BodyBorder="true" 
            BodyStyle="padding : 10px;" Minimizable="True">
            <Body>
                
                <ext:TextField ID="OrgEntityFormMode" Text="" Hidden="true" runat="server" />
                <ext:TextField ID="OrgEntityType" Text="" Hidden="true" runat="server" />
                
                <ext:FormLayout ID="OrgEntityFormLayout" Cls="formlayout" Width="500" runat="server">
                    <ext:Anchor>
                        <ext:TextField 
                            ID="OrgEntityName" 
                            FieldLabel="Name"  
                            InputType="Text" 
                            LabelStyle="padding-left:8px;font-weight:bold" 
                            AllowBlank="false" 
                            Width="200"
                            BlankText="Name is required"
                            runat="server" />
                    </ext:Anchor>
                    <ext:Anchor>                                       
                        <ext:FieldSet ID="OrgEntityAddressFieldSet" Collapsible="true" runat="server" AutoHeight="true" Title="Address">
                            <Body>                    
                                <ext:Panel ID="ContainerPanelAddress1" runat="server" Title="Address 1" BodyBorder="false" BodyStyle="background:none;padding: 10px 0;">
                                    <Body>
                                        <ext:ColumnLayout ID="OrgEntityAddressLayout" runat="server">
                                            <ext:LayoutColumn ColumnWidth="0.5">
                                                <ext:Panel ID="OrgEntityAddressPanelLeft" runat="server" BodyBorder="false" BodyStyle="background:none;">
                                                    <Body>
                                                        <ext:FormLayout ID="OrgEntityFormLayoutLeft" runat="server">
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityA1" 
                                                                    FieldLabel="Address Line 1"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text"                                                         
                                                                    Width="130" 
                                                                    runat="server" />
                                                            </ext:Anchor>
    
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityA3" 
                                                                    FieldLabel="Address Line 3"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text" 
                                                                    Width="130"
                                                                    runat="server" />                                    
                                                            </ext:Anchor>
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityTown" 
                                                                    FieldLabel="Town/City"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text" 
                                                                    Width="130"
                                                                    runat="server" />                                    
                                                            </ext:Anchor>
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityPostCode" 
                                                                    FieldLabel="Post Code"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text" 
                                                                    Width="100"
                                                                    runat="server" />                                    
                                                            </ext:Anchor>                                                                                                                                                                    
                                                        </ext:FormLayout>                                        
                                                    </Body>
                                                </ext:Panel>
                                            </ext:LayoutColumn>
                                            <ext:LayoutColumn ColumnWidth="0.5">
                                                <ext:Panel ID="OrgEntityAddressPanelRight" runat="server" BodyBorder="false" BodyStyle="background:none;">
                                                    <Body>
                                                        <ext:FormLayout ID="OrgEntityFormLayoutRight" runat="server">
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityA2" 
                                                                    FieldLabel="Address Line 2"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text" 
                                                                    Width="130"
                                                                    runat="server" />                                    
                                                            </ext:Anchor>
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityA4" 
                                                                    FieldLabel="Address Line 4"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text" 
                                                                    Width="130"
                                                                    runat="server" />                                    
                                                            </ext:Anchor>
                                                            <ext:Anchor>
                                                                <ext:TextField 
                                                                    ID="OrgEntityCounty" 
                                                                    FieldLabel="County/State"  
                                                                    LabelStyle="padding-left:8px;font-weight:bold" 
                                                                    InputType="Text" 
                                                                    Width="130"
                                                                    runat="server" />                                    
                                                            </ext:Anchor>
                                                            <ext:Anchor>
                                                                <ext:ComboBox ID="OrgEntityCountryList" FieldLabel="Country" LabelStyle="padding-left:8px;font-weight:bold" runat="server">
                                                                    <SelectedItem Value="United Kingdom" />
                                                                    <Items>
                                                                        <ext:ListItem Text="United Kingdom" Value="United Kingdom" />
                                                                    </Items>
                                                                </ext:ComboBox>                                    
                                                            </ext:Anchor>                                                
                                                        </ext:FormLayout>                                        
                                                    </Body>
                                                </ext:Panel>                                                                                    
                                            </ext:LayoutColumn>
                                        </ext:ColumnLayout>                                
                                    </Body>
                                </ext:Panel>                                                                                                                
                            </Body>
                            <Buttons>
                                <ext:Button ID="AddAddressBtn" runat="server" Text="Add Another Address" OnClientClick="OrgEntityHandler.addAddressFields();"></ext:Button>
                            </Buttons>
                        </ext:FieldSet>                    
                    </ext:Anchor>
    
    
    /*********** REST OF THE FORM OMITTED *******/
  2. #2

    RE: Body null error

    To narrow down the problem I have noticed that the error triggers if I have try to create a new instance of a component inside the outer Panel OR if I do xtype:'form' instead for example.

    The problem is if I do not use FormPanel I will have to define all the labels separately.
  3. #3

    RE: Body null error

    Hi,

    The body available after render only.
    Plus if you create ExtJS FormPanel on client side then please ensure that you do not place it to the asp.net form tag because FormPanel can be nested to other form (form panel creates own form but one form can'be nested to other form)


    Your window which contains fieldset (OrgEntityAddressFieldSet fieldset is container for your FormPanel) *must be placed outside asp.net form tag


  4. #4

    RE: Body null error

    Confused!! Could you give me an example of how to add fields to a form at run time or whatever the best way to achieve this ? thanks

Similar Threads

  1. Closing a tab causes dom parentNode is null error
    By logicspeak in forum 1.x Help
    Replies: 5
    Last Post: Aug 20, 2010, 5:19 PM
  2. [CLOSED] [1.0] parentNode is null error
    By tansu in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 18, 2010, 2:16 PM
  3. [1.0] Error binding null Int fields
    By protactinium in forum 1.x Help
    Replies: 1
    Last Post: May 07, 2010, 6:23 PM
  4. Replies: 6
    Last Post: Aug 28, 2009, 12:19 PM
  5. [GridPanel] Filter error when date is null
    By knoll in forum 1.x Help
    Replies: 3
    Last Post: Apr 22, 2009, 7:20 AM

Posting Permissions