Hello @sveins12!
Splendid sample code! I have changed some things on it and will post it back below.
In summary:
- FormLayout takes out a lot of customization you can do in forms. If you are not happy with the position of stuff and using FormLayout, you should switch to something else and experiment until it looks good for you. For insights on this issue, please look up the form examples in our
examples explorer. This is a good starting point:
FormPanel validation.
- You can get the error message from your script code if you inspect field.activeErrors object/array.
- You can position the validity message in spite of a given field by the
MsgTarget
setting.
The
MsgTarget
can refuse to show the message where you ask it for if you are using the
Form layout. In this case you can either switch the entire view to another layout, or wrap the field inside a container with a less intrusive layout like, maybe,
VBox.
And here's the code I came up with:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>c61225_Index</title>
<script type="text/javascript">
var clickHandler = function (me) {
var messages = []; // Validation messages should be pushed to this array.
var errors = 0;
me.up('panel').items.each(function (field) {
if (!Ext.isFunction(field.validate))
return;
// If field was a Ext.data.field.Field we could
// do something like field.validate(value, null, messages) to fill up messages.
// But Ext.form.field.Field's validate function has no parameters for that:
if (!field.validate()) {
errors++;
messages.push(field.activeErrors[0]);
}
});
if (errors > 0)
Ext.Msg.info({ html: 'Invalid fields: ' + errors + ' msgs: ' + messages.join('//') });
else
Ext.Msg.info({ html: 'Everything is OK' });
}
</script>
</head>
<body>
<div>
@{
var x = Html.X();
}
@x.ResourceManager()
@(
x.Panel()
.Title("Test validation")
.LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
.Items(
x.NumberField()
.AllowBlank(false)
.ID("nf1")
.BlankText("BlankText1")
.MsgTarget(MessageTarget.Under)
,
x.NumberField()
.AllowBlank(false)
.BlankText("BlankText2")
.MsgTarget(MessageTarget.Under)
)
.Buttons(
x.Button()
.Text("Validate")
.Handler(@"clickHandler(this)")
)
)
</div>
</body>
</html>
I hope this helps! Remember, browser debugger is your friend to investigate the data structures and get the information you need/want.