What's New?

[CLOSED] FormPanel Waiting Mask doesn't hide well

  1. #1
    Sep 04, 2012, 8:37 AM

    [CLOSED] FormPanel Waiting Mask doesn't hide well

    Hi,

    I reproduced a test case of a waiting mask error that works right in rev. 4283 of v2.1 and with my DLL updated to rev. 4306 doesn't works right. It could be broken in other revision.

    Steps to reproduce:
    1. Click Button to start test, it expands a panel with a formpanel
    2. Fill field in this formpanel
    3. Click in Save Button
    4. The waiting mask is unhidden in rev 4306 (KO)


    MY CONTROLLER
    public ActionResult Save()
        {
            Thread.Sleep(2000);

            return new FormPanelResult();
        }
    ASPX CODE
    <html>
<head runat="server">
    <title>FormPanel Validation - Ext.NET Examples</title>
    <style type="text/css">
        .icon-exclamation
        {
            padding-left: 25px !important;
            background: url(/icons/exclamation-png/ext.axd) no-repeat 3px 0px !important;
        }
        
        .icon-accept
        {
            padding-left: 25px !important;
            background: url(/icons/accept-png/ext.axd) no-repeat 3px 0px !important;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Button runat="server" Text="Start Test">
        <Listeners>
            <Click Handler="if (ExpandablePanel.disabled)
                                ExpandablePanel.setDisabled(false);

                            ExpandablePanel.expand(true);" />
        </Listeners>
    </ext:Button>
    <ext:TabPanel ID="tabPanelTabs" runat="server" Border="false" Height="500">
        <Items>
            <ext:Panel ID="myTab" runat="server" Layout="FitLayout" Title="My Tab" Border="false">
                <Items>
                    <ext:Panel runat="server" Border="false" Layout="BorderLayout">
                        <Items>
                            <ext:Panel ID="ExpandablePanel" runat="server" Collapsed="true" Height="400" Border="false"
                                Region="South" Title="Expandable Panel" Disabled="true" ButtonAlign="Center"
                                Layout="FitLayout">
                                <Content>
                                    <ext:FormPanel ID="FormPanel1" runat="server" Title="FormPanel Validation (all fields required)"
                                        BodyPadding="5" ButtonAlign="Right" Layout="Column" Url="/MyArea/MyController/Save">
                                        <Items>
                                            <ext:Panel runat="server" Border="false" Header="false" ColumnWidth=".5" Layout="Form"
                                                LabelAlign="Top">
                                                <Defaults>
                                                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                                    <ext:Parameter Name="MsgTarget" Value="side" />
                                                </Defaults>
                                                <Items>
                                                    <ext:TextField runat="server" FieldLabel="First Name" AnchorHorizontal="92%" />
                                                    <ext:TextField runat="server" FieldLabel="Company" AnchorHorizontal="92%" />
                                                </Items>
                                            </ext:Panel>
                                            <ext:Panel runat="server" Border="false" Layout="Form" ColumnWidth=".5" LabelAlign="Top">
                                                <Defaults>
                                                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                                    <ext:Parameter Name="MsgTarget" Value="side" />
                                                </Defaults>
                                                <Items>
                                                    <ext:TextField runat="server" FieldLabel="Last Name" AnchorHorizontal="92%" />
                                                    <ext:TextField runat="server" FieldLabel="Email" Vtype="email" AnchorHorizontal="92%" />
                                                </Items>
                                            </ext:Panel>
                                        </Items>
                                        <BottomBar>
                                            <ext:StatusBar runat="server" />
                                        </BottomBar>
                                        <Listeners>
                                            <ValidityChange Handler="this.dockedItems.get(1).setStatus({
                                                     text : valid ? 'Form is valid' : 'Form is invalid', 
                                                     iconCls: valid ? 'icon-accept' : 'icon-exclamation'
                                                 });
                                                 #{Button1}.setDisabled(!valid);" />
                                        </Listeners>
                                    </ext:FormPanel>
                                </Content>
                                <Buttons>
                                    <ext:Button ID="Button1" runat="server" Text="Save" Disabled="true" FormBind="true">
                                        <Listeners>
                                            <Click Handler="if (#{FormPanel1}.getForm().isValid()) {
                                                                #{FormPanel1}.form.submit({ waitMsg: 'My waiting message',
                                                                    waitTitle: 'My Custom Title'
                                                                });
                                                            }else{
                                                                Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});}" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Cancel" />
                                </Buttons>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
    </form>
</body>
</html>
    Last edited by Daniil; Sep 21, 2012 at 10:58 AM. Reason: [CLOSED]
  2. #2
    Sep 04, 2012, 9:06 AM
    Hi,

    Thanks for the report.

    Here was the bug report.
    http://www.sencha.com/forum/showthread.php?228970

    I think the fix will be included in ExtJS 4.1.2. Then it will appear in Ext.NET after updating to ExtJS 4.1.2.

    For now please use the workaround suggested by @Animal.
  3. #3
    Sep 04, 2012, 9:18 AM
    Then I see from Ext.NET 2.1 rev 4283 to Ext.NET 2.1 rev 4306 you have changed ext.js code.

    As far as I know, I thought that both revisions use Ext.JS 4.1.1.

    This is locking for me right now because I migrate a large part of my application to v2.1, and want avoid to do more changes to this part.
    If I use @Animal workaround, could I use the same test case (code) without doing changes on it?

    If not, what extra changes I have to do assuming @Animal workaround.

    Thanks
  4. #4
    Sep 04, 2012, 9:37 AM
    Quote Originally Posted by softmachine2011 View Post
    Then I see from Ext.NET 2.1 rev 4283 to Ext.NET 2.1 rev 4306 you have changed ext.js code.

    As far as I know, I thought that both revisions use Ext.JS 4.1.1.
    We updated Ext.NET to ExtJS 4.1.1 RC1, RC2, RC3, GA release respectively when they were released.

    According what @Scott said this bug appeared after RC2.

    Quote Originally Posted by softmachine2011 View Post
    If I use @Animal workaround, could I use the same test case (code) without doing changes on it?
    You just need to add the below script into the page <head>. I just tested, it works well.

    Fix
    <script type="text/javascript">
    Ext.define('Ext.form.SubmitFix', {
        override: 'Ext.ZIndexManager',

        register : function(comp) {
            var me = this,
                compAfterHide = comp.afterHide;
        
            if (comp.zIndexManager) {
                comp.zIndexManager.unregister(comp);
            }
            comp.zIndexManager = me;

            me.list[comp.id] = comp;
            me.zIndexStack.push(comp);
        
            // Hook into Component's afterHide processing
            comp.afterHide = function() {
                compAfterHide.apply(comp, arguments);
                me.onComponentHide(comp);
            };
        },

        /**
        * Unregisters a {@link Ext.Component} from this ZIndexManager. This should not
        * need to be called. Components are automatically unregistered upon destruction.
        * See {@link #register}.
        * @param {Ext.Component} comp The Component to unregister.
        */
        unregister : function(comp) {
            var me = this,
                list = me.list;
        
            delete comp.zIndexManager;
            if (list && list[comp.id]) {
                delete list[comp.id];
            
                // Relinquish control of Component's afterHide processing
                delete comp.afterHide;
                Ext.Array.remove(me.zIndexStack, comp);

                // Destruction requires that the topmost visible floater be activated. Same as hiding.
                me._activateLast();
            }
        }
    });
</script>
  5. #5
    Sep 04, 2012, 10:08 AM
    I have applied the fix, and seems to work like old releases.

    I could remove it when Ext.JS will be in version 4.1.2 right?
  6. #6
    Sep 04, 2012, 10:12 AM
    Quote Originally Posted by softmachine2011 View Post
    I could remove it when Ext.JS will be in version 4.1.2 right?
    To be more precisely, when we will update Ext.NET to ExtJS 4.1.2.
  7. #7
    Sep 04, 2012, 10:21 AM
    Ok, I will await for this upgrade for this and other bug-fixes.

    Thanks
  8. #8
    Sep 21, 2012, 7:35 AM
    Fixed with Ext.JS 4.1.2 (tested in Ext.NET rev 4363)
  9. #9
    Sep 21, 2012, 10:58 AM
    Thank you for confirming!

Similar Threads

  1. Hide Mask after autoload.
    By norphos in forum 1.x Help
    Replies: 0
    Last Post: Jun 15, 2011, 8:48 AM
  2. [CLOSED] AjaxMethod, isUpload - hide mask
    By mrozik in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 08, 2010, 11:42 AM
  3. [CLOSED] loadRecord doesn't work when formPanel is in Tab
    By HOWARDJ in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 16, 2009, 2:12 PM
  4. I want to show mask from codebehind ! but mycode doesn't work
    By bonjovi75 in forum 1.x Help
    Replies: 0
    Last Post: Jun 01, 2009, 5:27 AM
  5. Event Mask doesn't work!!
    By mono in forum 1.x Help
    Replies: 7
    Last Post: Mar 10, 2009, 7:07 AM

Tags for this Thread

Posting Permissions