Jul 19, 2018, 3:06 PM
[CLOSED] Formpanel / Validation / Change a valid combobox selection / still invalid
Hello
I tried to search for a solution for this on the forum but wasn't really successful. Perhaps I tried the wrong words... Sorry if it is a double.
When I am editing a formpanel that is already valid the "save button" is grayed out when I load it initially. That is ok for me because there is no use in saving when I didn't change anything. If I change now a selection of a dropdown box the form stays invalid even though in my opinion it should be valid now and I should be able to save it. How can I change this? I don't want to have a listener on every combobox to check the validation....
Thank you for giving me a clue in the right direction.
best regards
example
I tried to search for a solution for this on the forum but wasn't really successful. Perhaps I tried the wrong words... Sorry if it is a double.
When I am editing a formpanel that is already valid the "save button" is grayed out when I load it initially. That is ok for me because there is no use in saving when I didn't change anything. If I change now a selection of a dropdown box the form stays invalid even though in my opinion it should be valid now and I should be able to save it. How can I change this? I don't want to have a listener on every combobox to check the validation....
Thank you for giving me a clue in the right direction.
best regards
example
<%@ Page Language="C#" %>
<script runat="server">
private object TestData
{
get
{
return new object[]
{
new object[] { "AL", "Alabama", "The Heart of Dixie" },
new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
new object[] { "AZ", "Arizona", "The Grand Canyon State" },
new object[] { "AR", "Arkansas", "The Natural State" },
new object[] { "CA", "California", "The Golden State" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>FormPanel Validation - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.icon-exclamation {
padding-left: 25px !important;
background: url(/icons/exclamation-png/ext.axd) no-repeat 3px 0px !important;
}
.icon-accept {
padding-left: 25px !important;
background: url(/icons/accept-png/ext.axd) no-repeat 3px 0px !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Layout="FitLayout"
Width="600"
Height="250">
<Items>
<ext:FormPanel
ID="FormPanel1"
runat="server"
Title="FormPanel Validation (all fields required)"
BodyPadding="5"
ButtonAlign="Right"
Layout="Column">
<Items>
<ext:Panel
runat="server"
Border="false"
Header="false"
ColumnWidth=".5"
Layout="Form"
LabelAlign="Top">
<Defaults>
<ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="MsgTarget" Value="side" />
</Defaults>
<Items>
<ext:ComboBox
runat="server"
FieldLabel="Select a single state"
DisplayField="name"
Width="320"
LabelWidth="130"
QueryMode="Local"
TypeAhead="true">
<Store>
<ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="name" />
<ext:ModelField Name="slogan" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<SelectedItems>
<ext:ListItem Text="Alaska"></ext:ListItem>
</SelectedItems>
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
<BottomBar>
<ext:StatusBar runat="server" />
</BottomBar>
<Listeners>
<ValidityChange Handler="this.dockedItems.get(1).setStatus({
text : valid ? 'Form is valid' : 'Form is invalid',
iconCls: valid ? 'icon-accept' : 'icon-exclamation'
});
#{Button1}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button
ID="Button1"
runat="server"
Text="Save"
Disabled="true"
FormBind="true">
<Listeners>
<Click Handler="if (#{FormPanel1}.getForm().isValid()) {Ext.Msg.alert('Submit', 'Saved!');}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});}" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Cancel" />
</Buttons>
</ext:Panel>
</form>
</body>
</html>
Last edited by fabricio.murta; Jul 20, 2018 at 9:26 PM.