[CLOSED] RowEditor & Form Validation

  1. #1

    [CLOSED] RowEditor & Form Validation

    Hi,

    When I have a RowEditor on a GridPanel, the fields inside the editor are sometimes causing the surrounding form to fail validation. Example:

    <!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></title>
        <script type="text/javascript">
            var addRow = function () {
                GridPanel1.getRowEditor().stopEditing();
                      
                GridPanel1.insertRecord();
                      
                GridPanel1.getView().refresh();
                GridPanel1.getRowEditor().startEditing(0);
            }
            var removeRow = function (a, b, rowIndex) {
                GridPanel1.store.removeAt(rowIndex);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <ext:FormPanel ID="FormPanel1" runat="server" Frame="true" ButtonAlign="Left">
                <Items>
                    <ext:TextField runat="server" AllowBlank="false" FieldLabel="Test field" />
                    <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400">
                        <Store>
                            <ext:Store runat="server">
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="text" Type="String" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <Plugins>
                            <ext:RowEditor runat="server" SaveText="Update" ClicksToEdit="1" />
                        </Plugins>
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Add Row" Icon="Add">
                                        <Listeners>
                                            <Click Fn="addRow" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <ColumnModel>
                            <Columns>
                                <ext:Column Header="Text Column" DataIndex="text" Width="220">
                                    <Editor>
                                        <ext:TextField runat="server" AllowBlank="false" />
                                    </Editor>
                                </ext:Column>
                                <ext:CommandColumn>
                                    <Commands>
                                        <ext:GridCommand Icon="Delete" CommandName="Delete" Text="Delete" />
                                    </Commands>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <Listeners>
                            <Command Fn="removeRow" />
                        </Listeners>
                    </ext:GridPanel>
                </Items>
                <Buttons>
                    <ext:Button ID="ButtonSave" runat="server" Icon="Disk" Text="Save">
                        <Listeners>
                            <Click Handler="if(!#{FormPanel1}.isValid())
                                                alert('Form is invalid');
                                            else
                                                alert('Success');" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </form>  
    </body>
    </html>
    Steps to reproduce:

    1. Load page
    2. Fill in top text box (to make form valid)
    3. Click "Save" (you will notice it says success)
    4. Click "Add Row"
    5. Fill in box in row
    6. Click "Update"
    7. Click "Add Row"
    8. Click "Cancel"
    9. Click "Delete" on blank row
    10. Click "Save"

    You will notice that after you have clicked save for the second time, it will say the form is invalid, despite the fact that it is now valid.

    Is there any way to solve this?

    Many Thanks
    Last edited by Daniil; Jul 22, 2011 at 10:18 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Well, the fields of editors do not participate in FormPanel validation logic at all, because they are not in "items" collection.
    Last edited by Daniil; Jun 13, 2012 at 8:48 PM.
  3. #3
    I was wrong, somehow the TextField from Editor is validated as well.

    We are investigating.

    Thanks for the example and steps.
  4. #4
    Hi,

    I am not sure what a sense to add the grid to the form panel but if you still need it then add the following custom config to the row editor
    <CustomConfig>
         <ext:ConfigItem Name="getBubbleTarget" Value="Ext.emptyFn" Mode="Raw" />
    </CustomConfig>
    Last edited by Daniil; Jul 22, 2011 at 9:43 AM.
  5. #5
    Hi Vladimir,

    When calling isValid() on the FormPanel it simply calls isValid() on the whole form so to avoid the RowEditor being caught in this validation I would have to put the GridPanel outside the whole form. This isn't practical when I want other form elements before and after it.

    Anyway, the fix you have provided solves my issue.

    Many Thanks

Similar Threads

  1. Remote Validation using RowEditor
    By mait_k in forum 1.x Help
    Replies: 1
    Last Post: Dec 20, 2011, 4:24 PM
  2. RowEditor startEdit and validation
    By ralex in forum 1.x Help
    Replies: 11
    Last Post: Nov 23, 2011, 9:03 PM
  3. RowEditor validation
    By reezvi in forum 1.x Help
    Replies: 0
    Last Post: Aug 12, 2011, 6:36 PM
  4. [CLOSED] RowEditor Validation
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 20, 2011, 12:21 PM
  5. [CLOSED] [1.0] RowEditor validation tooltip obstructing editing
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 09, 2010, 8:04 AM

Tags for this Thread

Posting Permissions