Jun 30, 2017, 2:33 PM
[CLOSED] TabPanel validation and focus
I have a form with a TabPanel containing multiple panels and inputs across all the tabs. I am trying to set focus on the tab that contains the first invalid input. Basing my example on a post I found in a Sencha forum but it is not working. The line that breaks is:
firstInvalidField = fs.getForm().items.find(function(f) { return !f.isValid(); });
My guess is I maybe don't have the right panel but I've tried the outer form panel "plnSettings" and the tab panel "pnlTabs" and neither has an items collection. Hoping you can point me to an example in ext.net version 4 of how this is supposed to be done.<%@ Page Language="vb" %>
<!DOCTYPE html>
<script runat="server">
Public Sub btnApplyChanges_Click() '(sender As Object, e As DirectEventArgs)
End Sub
Protected Sub Page_Load(sender As Object, e As EventArgs)
End Sub
</script>
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var overIt = function () {
console.log('over handler');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:XScript runat="server">
<script type="text/javascript">
var validateSettings = function() {
var fs = #{pnlSettings};
var isvalid = fs.getForm().isValid();
if (isvalid) {
alert("valid");
}
else {
firstInvalidField = fs.getForm().items.find(function(f) { return !f.isValid(); });
if (firstInvalidField) {
ParentTab = firstInvalidField.findParentByType('tabpanel');
TabPanel = firstInvalidField.findParentByType('panel');
ParentTab.activate(TabPanel.getId());
}
Ext.MessageBox.alert('Validation Failed', 'Please ensure that all fields contain valid values.');
}
return isvalid;
};
</script>
</ext:XScript>
<ext:Viewport ID="vp1" runat="server" Layout="FitLayout" Scrollable="Both">
<Items>
<ext:FormPanel id="pnlSettings" runat="server" Layout="FitLayout">
<items>
<ext:TabPanel
DeferredRender="false"
id="pnlTabs"
runat="server"
MarginSpec="0 0 20 0">
<Defaults>
<ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
</Defaults>
<Items>
<ext:FormPanel
runat="server"
Title="Cash Management"
AutoDataBind="true" >
<Items>
<ext:Panel runat="server" Title="subpanel1" ID="plnCashTriggers" Padding="20" DefaultAnchor="100%"
Collapsible="true">
<Items>
<ext:NumberField ID="TriggerFloor" runat="server" labelwidth="200" FieldLabel="Trigger Floor" AllowBlank="true" />
</Items>
</ext:Panel>
</Items>
</ext:FormPanel>
<ext:FormPanel ID="pnl2" Title="Panel 2" runat="server">
<Items>
<ext:TextField runat="server" ID="txt1" FieldLabel="FieldOne" AllowBlank="false"></ext:TextField>
<ext:TextField runat="server" ID="txt2" FieldLabel="FieldTwo" AllowBlank="false"></ext:TextField>
</Items>
</ext:FormPanel>
<ext:FormPanel ID="Panel3" Title="Panel 3" runat="server">
<Items>
<ext:TextField runat="server" ID="TextField4" FieldLabel="Field4" AllowBlank="false"></ext:TextField>
<ext:TextField runat="server" ID="TextField5" FieldLabel="Field5" AllowBlank="false"></ext:TextField>
</Items>
</ext:FormPanel>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill></ext:ToolbarFill>
<ext:Button ID="btnApplyChanges" runat="server" Text="Apply" >
<DirectEvents>
<Click Before="var v = validateSettings(); return v;" OnEvent="btnApplyChanges_Click"></Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Cancel"></ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:TabPanel>
</Items>
</ext:FormPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
Last edited by fabricio.murta; Aug 18, 2017 at 10:14 PM.
Reason: no feedback from the user in 7+ days