[CLOSED] [1.0] Remove fields from FormPanel

  1. #1

    [CLOSED] [1.0] Remove fields from FormPanel

    In the example below, I've added a button that when clicked will remove all the fields from the FormPanel. This removes all the field controls, but doesn't remove the associated FieldLabels.

    I've tried both the "FormPanel.remove" and "FormPanel.removeAll" methods, and these don't appear to work. Am I missing something, or is this a bug?

    Thanks,

    Dan

    <%@ 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 id="Head1" runat="server">    
        <script type="text/javascript">
    
            function deleteAllFields()
            {
                for (var i = 0; i < frmDetails.items.length; i++)
                {
                    frmDetails.remove(frmDetails.items.items[i]);
    
                    i--; 
                }
    
                frmDetails.removeAll();
    
                frmDetails.doLayout();  
            }
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager> 
            
            <ext:FormPanel 
                Title="Details" 
                Frame="true"
                LabelWidth="200"
                Width="800"
                Height="600"
                id="frmDetails"
                BodyStyle="padding: 6px;"
                runat="server">
                <Defaults>
                    <ext:Parameter Name="Anchor" Value="97%"></ext:Parameter>
                </Defaults>
                <Items>
                    <ext:TextArea runat="server" ID="txtTest" FieldLabel="Field 1" AllowBlank="false"></ext:TextArea>
                    <ext:TextArea runat="server" ID="txtTest1" FieldLabel="Field 2" AllowBlank="false"></ext:TextArea>
                    <ext:TextArea runat="server" ID="txtTest2" FieldLabel="Field 3" AllowBlank="false"></ext:TextArea>
                </Items>
                <BottomBar>
                    <ext:Toolbar ID="toolbarMain" runat="server">
                        <Items>
                            <ext:Button ID="btnRender" runat="server" Text="Delete all fields">
                                <Listeners>
                                    <Click Fn="deleteAllFields"></Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:FormPanel>
        </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] [1.0] Remove fields from FormPanel

    Hi,

    It seems it is ExtJS bug. Use the following code to remove the fields
    function deleteAllFields()
            {
                for (var i = 0; i < frmDetails.items.length; i++)
                {
                    var field = frmDetails.items.get(i),
                        formItem = field.el.up(".x-form-item");
                    frmDetails.getForm().remove(field);                
                    frmDetails.remove(field);          
                    formItem.remove();      
                    i--; 
                }
                frmDetails.doLayout();  
            }
  3. #3

    RE: [CLOSED] [1.0] Remove fields from FormPanel

    We're going to implement a fix to handle this automatically.

    Calling .remove or removeAll on the Container should hide both the input element and fieldLabel if available.


    Calling .hide or .destroy on the child Component, should also hide both the element and associated fieldLabel if available.


    Geoffrey McGill
    Founder
  4. #4

    RE: [CLOSED] [1.0] Remove fields from FormPanel

    Hi Dan,

    We've committed some changes and now calling .removeAll on the Container will remove all the inner items as well as their fieldLabel if available.

    Example

    <%@ 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>   
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:FormPanel
                ID="FormPanel1"
                runat="server"
                Title="Example" 
                Width="350"
                Height="185"
                Padding="5"
                DefaultAnchor="100%">
                <Items>
                    <ext:TextField runat="server" FieldLabel="Field 1" />
                    <ext:DateField runat="server" FieldLabel="Field 2" />
                    <ext:TextField runat="server" FieldLabel="Field 3" />
                </Items>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Remove All Fields" OnClientClick="#{FormPanel1}.removeAll();" />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Hope this helps.

    Geoffrey McGill
    Founder
  5. #5

    RE: [CLOSED] [1.0] Remove fields from FormPanel

    I should also mention, the .remove() function of the Container, and .show()/.destroy() functions of the item (Component) also work as expected now.

    Geoffrey McGill
    Founder
  6. #6

    RE: [CLOSED] [1.0] Remove fields from FormPanel

    Excellent, thanks very much Geoffrey. Will update from SVN now.

    Dan

Similar Threads

  1. [CLOSED] Formpanel with 2 fields on the same line
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 25, 2010, 9:10 PM
  2. [CLOSED] [1.0] Looping through FormPanel fields
    By danielg in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 08, 2010, 7:42 AM
  3. [CLOSED] FormPanel.Defaults not applied to all Fields
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 31, 2010, 5:11 PM
  4. [CLOSED] [1.0] Problem with Multifield.Fields.Remove component
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 22, 2010, 6:42 PM
  5. Add and remove fields to PropertyGrid control
    By yarlenvas in forum 1.x Help
    Replies: 0
    Last Post: Mar 03, 2009, 5:56 PM

Posting Permissions