Jul 21, 2011, 4:26 PM
[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:
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
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]