PDA

View Full Version : [CLOSED] FormPanel Waiting Mask doesn't hide well



softmachine2011
Sep 04, 2012, 9:37 AM
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:

Click Button to start test, it expands a panel with a formpanel
Fill field in this formpanel
Click in Save Button
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>

Daniil
Sep 04, 2012, 10: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.

softmachine2011
Sep 04, 2012, 10: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

Daniil
Sep 04, 2012, 10:37 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.

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.



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>

softmachine2011
Sep 04, 2012, 11: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?

Daniil
Sep 04, 2012, 11:12 AM
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.

softmachine2011
Sep 04, 2012, 11:21 AM
Ok, I will await for this upgrade for this and other bug-fixes.

Thanks

softmachine2011
Sep 21, 2012, 8:35 AM
Fixed with Ext.JS 4.1.2 (tested in Ext.NET rev 4363)

Daniil
Sep 21, 2012, 11:58 AM
Thank you for confirming!