[OPEN] [#95] [2.5.3] ValidationStatus shows Message behind Window

[UnifyEducation]

Hi,

I'm creating a registration window with ValidationStatus. But the Message shows behind Window:

@(Html.X().Window()
    .Icon(Icon.LockGo)
    .ID("RegisterWindow")
    .Title("Register")
    .Closable(false)
    .Resizable(false)
    .Height(230)
    .Width(350)
    .BodyPadding(5)
            .Items(it => 
                it.Add(Html.X().FormPanel()
                .ID("registerForm")
                .Border(false)
                .Layout("form")
                .BodyStyle("background:transparent;")
                    .Items(item =>
                               {

                                   item.Add(Html.X().TextField()
                                                .ID("firstname")
                                                .FieldLabel("First Name")
                                                .AllowBlank(false).MsgTarget(MessageTarget.Side)
                                                .AnchorHorizontal("100%")
                                                .Focus(true));
                                   item.Add(Html.X().TextField()
                                                .ID("lastname")
                                                .AllowBlank(false).MsgTarget(MessageTarget.Side)
                                                .AnchorHorizontal("100%")
                                                .FieldLabel("Last Name"));
                                   item.Add(Html.X().TextField()
                                                .ID("email")
                                                .Vtype("email")
                                                .AllowBlank(false).MsgTarget(MessageTarget.Side)
                                                .AnchorHorizontal("100%")
                                                .FieldLabel("Email"));
                                   item.Add(Html.X().TextField()
                                                .ID("newpwd")
                                                .FieldLabel("Password")
                                                .AllowBlank(false).MsgTarget(MessageTarget.Side)
                                                .AnchorHorizontal("100%")
                                                .InputType(Ext.Net.InputType.Password)
                                       );
                                   item.Add(Html.X().TextField()
                                                .ID("confirmnewpwd")
                                                .AllowBlank(false).MsgTarget(MessageTarget.Side)
                                                .AnchorHorizontal("100%")
                                                .FieldLabel("Confirm Password")
                                                .InputType(Ext.Net.InputType.Password)
                                                .EnableKeyEvents(true)
                                                .Listeners(l => l.KeyPress.Handler = "if(e.getKey() == Ext.EventObject.ENTER){e.stopEvent();#{btnRegister}.fireEvent('click');}")
                                       );
                               })
                               .BottomBar(b => b.Add(Html.X().StatusBar()
                                   .DefaultText("Ready")
                                   .Plugins(p => p.Add(new ValidationStatus() { FormPanelID = "registerForm", ValidIcon = Icon.Accept, ErrorIcon = Icon.Exclamation }))))
                               )))

How can I resolve this problem?

[Daniil]

Hi,

Thanks for the report. I have report it to Sencha as well.
http://www.sencha.com/forum/showthre...10568&p=814994

You can fix it this way.

Markup

new ValidationStatus() 
{ 
    FormPanelID = "registerForm", 
    ValidIcon = Icon.Accept, 
    ErrorIcon = Icon.Exclamation,
    ErrorListCls = "x-status-error-list my-fix"
})

CSS

<style type="text/css">
    .my-fix {
        z-index: 99999;
    }
</style>

[UnifyEducation]

Thanks for your help.
But when I close the window, the ValidationStatus still exist

[Daniil]

It should be closed manully within a Window Close listener.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <style type="text/css">
        .my-fix {
            z-index: 99999;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Window runat="server">
        <Items>
            <ext:FormPanel ID="FormPanel1" runat="server">
                <Items>
                    <ext:TextField runat="server" AllowBlank="false" />
                </Items>
                <BottomBar>
                    <ext:StatusBar ID="StatusBar1" runat="server">
                        <Plugins>
                            <ext:ValidationStatus 
                                runat="server" 
                                FormPanelID="FormPanel1" 
                                ErrorListCls="x-status-error-list my-fix" />
                        </Plugins>
                    </ext:StatusBar>
                </BottomBar>
            </ext:FormPanel>
        </Items>
        <Listeners>
            <Close Handler="App.StatusBar1.plugins[0].msgEl.hide();" />
        </Listeners>
    </ext:Window>
</body>
</html>

[UnifyEducation]

Thank you,

I have just updated Ext.net and there are some errors with javascript:

Uncaught ReferenceError: Ext is not defined ext.axd:63
Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.statusbar.ValidationStatus ext.axd:21

<style type="text/css">
        .my-fix
        {
            width: 250px;
            z-index: 99999;
        }
    </style>

.BottomBar(b => b.Add(Html.X().StatusBar().ID("StatusBar1")
                                        .Plugins(p => p.Add(new ValidationStatus()
                                                                {
                                                                    FormPanelID = "registerForm",
                                                                    ValidIcon = Icon.Accept,
                                                                    ErrorIcon = Icon.Exclamation,
                                                                    ErrorListCls = "x-status-error-list my-fix"
                                                                }))
                                                                ))

All is OK when I comment this code

[Vladimir]

Please clarify how did you update? From SVN or Nuget? If Nuget then which package you downloaded via nuget?

[UnifyEducation]

Hi,
I updated :
-SVN revision 4063
-asp.net_mvc_4_rc_for_visual_studio_2010_sp1
Before I use asp.net mvc 4 beta.

[Vladimir]

I cannot reproduce the problem
Please post own test case

[UnifyEducation]

Here is my test:

View:

@using Ext.Net
@using Ext.Net.MVC
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <style type="text/css">
        .my-fix
        {
            width: 250px;
            z-index: 99999;
        }
    </style>
</head>
<body>
    <div>
        @Html.X().ResourceManager()
        @(Html.X().Window()
           .ID("RegisterWindow")
           .Title("Register")
           .Height(250)
           .Width(450)
           .BodyPadding(5)
           .Items(it =>
                  it.Add(Html.X().FormPanel()
                             .ID("registerForm")
                             .Border(false)
                             .Layout("form")
                             .BodyStyle("background:transparent;")
                             .Items(item =>
                                    item.Add(Html.X().TextField()
                                                 .ID("firstname")
                                                 .FieldLabel("First Name")
                                                 .AllowBlank(false).MsgTarget(MessageTarget.Side)
                                                 .AnchorHorizontal("100%")
                                                 .Focus(true))
                             )
                             .BottomBar(b => b.Add(Html.X().StatusBar().ID("StatusBar1")
                                                       .Plugins(p => p.Add(new ValidationStatus()
                                                                               {
                                                                                   FormPanelID = "registerForm",
                                                                                   ValidIcon = Icon.Accept,
                                                                                   ErrorIcon = Icon.Exclamation,
                                                                                   ErrorListCls = "x-status-error-list my-fix"
                                                                               }))
                                                 ))
                      )))
    </div>
</body>
</html>

Controllers:

public ActionResult Test()
        {
            return View();
        }

Test in Chrome:
Uncaught ReferenceError: Ext is not defined ext.axd:63
Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.statusbar.ValidationStatus

[Vladimir]

Your test case works correctly for me.
Can you post generated HTML?