What's New?

[CLOSED] TabPanel validation and focus

  1. #1
    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
  2. #2
    Jun 30, 2017, 6:58 PM
    Hello @rmelancon!

    First, it seems just find() is deprecated. You should be using findBy() instead. Same syntax.

    Second, there you have the hierarchy:
    - a FormPanel
  - a TabPanel
   - three FormPanels
    If all the three tabs are but pertaining to the same form, you shouldn't be using a FormPanel there, but just plain Ext.Net.Panels. You are not submitting those forms independently, are you?.

    Third, by the hierarchy above, we see we don't really have a plain form so, by getting the outer form, you have but only one item, which is the TabPanel. There's no magic "flattening" this hierarchy, you ought to get into each tab panel and check for their fields for validity. Then determine if that's the one you want to show back.

    Something in these lines:

    var tabHasInvalid = function (tab) {
    var invalidField = tab.items.findBy(function (field) {
        if (Ext.isFunction(field.isValid)) {
            return !field.isValid();
        } else {
            return false;
        }
    });

    return invalidField != null;
};

var validateSettings = function() {
    var fs = #{pnlSettings},
        // we expect the tabPanel to be the first item in the form panel
        tabPanel = fs.items.first(),
        tabs = tabPanel.items,
        focused = false,
        invalidTab,
        isValid = fs.getForm().isValid();;

    if (isValid) {
        Ext.Msg.alert("form validation", "form is valid");
    }
    else {
        // find the first tab with invalid fields within
        invalidTab = tabs.findBy(tabHasInvalid);

        if (invalidTab) {
            // Only activate the tab if it is not currently active
            if (tabPanel.getActiveTab() != invalidTab) {
                tabPanel.setActiveTab(invalidTab);
            }
        }
        Ext.MessageBox.alert('Validation Failed', 'Please ensure that all fields contain valid values.');
    }                    
    return isValid;
};
    (in replacement of the <script></script> block on your test case)

    I hope this helps!
  3. #3
    Jul 14, 2017, 4:08 PM
    Hello @rmelancon!

    It's been some days since we last provided a feedback to your inquiry here and still no response from you. Did the answer above help you at all, do you still need help on this subject? The thread may be marked as closed if you don't reply us in 7+ days from now but don't worry, even after it gets marked as closed, you will still be able to post here if you need.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] Validation TabPanel
    By JCarlosF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 20, 2013, 4:45 PM
  2. [CLOSED] How to raise a validation for a TextField when user moves the focus
    By digitek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 19, 2012, 4:42 PM
  3. [CLOSED] Unwanted Validation on Page_Load and Focus
    By LarryAucoin in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 17, 2012, 6:45 AM
  4. [CLOSED] TabPanel Focus Listener
    By softmachine2011 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 14, 2011, 9:03 AM
  5. [CLOSED] cross-window form validation with focus on an invalid control
    By ViniVidi in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 18, 2011, 4:51 PM

Posting Permissions