[CLOSED] Status Bar with Troubles

**opendat2000** · Oct 04, 2016, 2:51 PM

Hi Ext.Net Team !!

Please check the code sample below:


<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void FormSave(object sender, DirectEventArgs e)
    {
        FormStatusBar.SetStatus(new StatusBarStatusConfig { Text = "Form saved!", IconCls = "", Clear2 = true });

        Window2.Hide();
    }
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        StatusForm.Reset();
        FormStatusBar.ClearStatus(new StatusBarClearStatusConfig() { UseDefaults = true });
        
        Window2.Show();
    }
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Edit Form View - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

<style type="text/css">
        .x-status-error-list 
        {
            /*z-index: #{Window2}.el.getStyle('z-index') + 1*/
            z-index: 99999
        }
</style>

</head>

<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Neptune" />
        
        <ext:Window ID="Window1" runat="server" 
                Title="Window1"
                Icon="ApplicationEdit"
                Width="800" 
                Height="400"           
                BodyPadding="15" 
                Resizable="true" 
                Closable="false"
                Layout="Fit">
            <Items>
                <ext:FormPanel ID="FormPanel1" runat="server" 
                        Border="false" 
                        Layout="Form">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Open Window 2" >
                            <DirectEvents>
                                <Click OnEvent="Button1_Click" ></Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>

        <ext:Window ID="Window2" runat="server"
                Title="StatusBar with Integrated Form Validation"
                Modal="true"
                Width="350"
                Height="220"
                Layout="Fit"
                Hidden="true"
                Closable="true">
            <Listeners>
                <Close Handler="App.FormStatusBar.plugins[0].msgEl.hide();" />
            </Listeners>
            <BottomBar>
                <ext:StatusBar ID="FormStatusBar" runat="server"
                        DefaultText="Ready"
                        IconCls="">
                    <Plugins>
                        <ext:ValidationStatus ID="ValidationStatus1"
                            runat="server"
                            FormPanelID="StatusForm"
                            ValidIcon="Accept"
                            ErrorIcon="Exclamation" />
                    </Plugins>
                </ext:StatusBar>
            </BottomBar>
            <Items>
                <ext:FormPanel ID="StatusForm" runat="server"
                    LabelWidth="75"
                    ButtonAlign="Right"
                    Border="false"
                    Padding="10">
                    <Defaults>
                        <ext:Parameter Name="Anchor" Value="95%" />
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                        <ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
                        <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Name" BlankText="Name is required" />
                        <ext:DateField ID="DateField1" runat="server" FieldLabel="Birthdate" BlankText="Birthdate is required" />
                    </Items>
                    <Buttons>
                        <ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk">
                            <DirectEvents>
                                <Click
                                    OnEvent="FormSave"
                                    Before="var valid= #{StatusForm}.getForm().isValid(); if (valid) {#{FormStatusBar}.showBusy('Saving form...');} return valid;">
                                    <EventMask
                                        ShowMask="true"
                                        MinDelay="1000"
                                        Target="CustomTarget"
                                        CustomTarget="={#{StatusForm}.getEl()}"
                                        />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Buttons>
                </ext:FormPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

When I tested my project, I've encountered an issue of the StatusBar control, by opening and closing the window and click on the StatusBar control â€œReadyâ€, at second try appears again the validation errors, how you can see in the next pics:

Follow these steps

Step 1. Click Button "Open Window 2"

Click image for larger version.

Name: StatusBar with Integrated Form Validation 1.JPG
Views: 31
Size: 31.2 KB
ID: 24759

Step 2. Click StatusBar "Ready"

Click image for larger version.

Name: StatusBar with Integrated Form Troubles 0.JPG
Views: 33
Size: 20.2 KB
ID: 24760

Step 3. Type Field "Name"

Click image for larger version.

Name: StatusBar with Integrated Form Troubles 1.JPG
Views: 31
Size: 21.1 KB
ID: 24761

Step 4. Selected Date Field "Birthdate"

Click image for larger version.

Name: StatusBar with Integrated Form Troubles 2.JPG
Views: 27
Size: 21.3 KB
ID: 24762

Step 5. Close Window 2
Step 6. Click Button "Open Window 2"
Step 7. Click StatusBar "Ready"

Click image for larger version.

Name: StatusBar with Integrated Form Troubles 3.JPG
Views: 35
Size: 23.5 KB
ID: 24763

Can you help with the code?

I accept suggestions ideas or comments

**fabricio.murta** · Oct 05, 2016, 1:35 AM

Hello Mauricio!

The ValidationStatus plug in does not clear its status automatically when you clear the status of the status bar. This may bring undesired side effects in some situations so I'm not sure it can be used as a broad solution, but also believe it is an acceptable workaround for your case.

In short, you have to clear ValidationStatus plugin's errors list and then update the error display. This override binds the procedure to the status bar at every clear call:

<script type="text/javascript">
    Ext.define('Ext.ux.statusbar.StatusBar', {
        override: 'Ext.ux.statusbar.StatusBar',
        clearStatus: function (o) {
            if (this.plugins != null) {
                for (var i = 0; i < App.FormStatusBar.plugins.length; i++) {
                    var plugin = App.FormStatusBar.plugins[i];
                    if (plugin instanceof Ext.ux.statusbar.ValidationStatus) {
                        plugin.errors.clear();
                        plugin.updateErrorList();
                    }
                }
            }
            return this.callParent(arguments);
        }
    });
</script>

Hope this helps!

**opendat2000** · Oct 05, 2016, 11:54 AM

Hello FabrÃ*cio !

Thanks a lot for your reply, the code line you proposed worked perfectly.

You're providing a great support ! Keep up the great work.

Please close the thread.

Saludos
Mauricio.

**fabricio.murta** · Oct 05, 2016, 8:52 PM

Thanks, Mauricio! We really appreciate your feedback! (be it "it worked" or be it "no, it didn't work in my case")

Besides, you help us a lot help you by providing the simplified sample cases and step-by. Just a "cause-consequence" chain. With them, we can focus on the real issue and be able to provide feedback in a timely fashion.

Thread: [CLOSED] Status Bar with Troubles

Thread Tools

Search Thread

Display

[CLOSED] Status Bar with Troubles

Similar Threads

[CLOSED] Status Bar with Integrated Form Validation Troubles

[CLOSED] Status Code: Status Text: BADRESPONSE: Unexpected token <

[CLOSED] execute for too long time result in Status Code: Status Text: communication failure

ComboBox Request Failure occur after store reload Status Code: 200, Status Text: OK

status text status code CUSTOM

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Status Bar with Troubles

[CLOSED] Status Bar with Troubles

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us