PDA

View Full Version : [CLOSED] Handler for a Button is taking atleast 5-6 seconds just to clear 14 fields from the Client Side...



Fahd
Jul 11, 2012, 11:49 PM
I have tried to re-create my issue with a simple example below.

My issue is taking taking 5-6 seconds to clear 14 fields in javascript, the simple example I created takes at least 3 seconds just to clears a few fields in Javascript.

Please advise ??

We did this same clearing of fields in codebehind in v1.4 and it was MUCH FASTER, I moved it to Javascript in the most current version v2.0 thinking it would solve my issue, but it did not.



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var store = this.SelectBox1.GetStore();
store.DataSource = new object[]
{
new object[] {"AL", "Alabama", "The Heart of Dixie"},
new object[] {"AK", "Alaska", "The Land of the Midnight Sun"},
new object[] {"AZ", "Arizona", "The Grand Canyon State"},
new object[] {"AR", "Arkansas", "The Natural State"},
new object[] {"WI", "Wisconsin", "America's Dairyland"},
new object[] {"WY", "Wyoming", "Like No Place on Earth"}
};
store.DataBind();
//************************************************** ***********************************
var store2 = this.SelectBox2.GetStore();
store2.DataSource = new object[]
{
new object[] {"MO", "Missouri", "Show Me State"},
new object[] {"MT", "Montana", "Big Sky Country"},
new object[] {"NE", "Nebraska", "Beef State"},
new object[] {"NV", "Nevada", "Silver State"},
new object[] {"NH", "New Hampshire", "Granite State"},
new object[] {"NJ", "New Jersey", "Garden State"}

};
store2.DataBind();

NumberField1.Value = 1;
NumberField2.Value = 2;
NumberField3.Value = 3;
NumberField4.Value = 4;
NumberField5.Value = 5;
NumberField6.Value = 6;
NumberField7.Value = 7;
NumberField8.Value = 8;
NumberField9.Value = 9;
NumberField10.Value = 10;
NumberField11.Value = 11;
NumberField12.Value = 12;
}
}

protected void BtnAddClick(object sender, DirectEventArgs e)
{
// Do some code behind processing...
X.Msg.Notify("Working", "Completed !!!").Show();
}

</script>
<!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 id="Head1" runat="server">
<title>Simple Form Panel - Ext.NET Examples</title>
<ext:XScript ID="XScript1" runat="server">
<script language="javascript" type="text/javascript">



var clearFields = function () {

#{SelectBox1}.clearValue();
#{SelectBox2}.clearValue();

#{NumberField1}.clear();
#{NumberField2}.clear();
#{NumberField3}.clear();
#{NumberField4}.clear();
#{NumberField5}.clear();
#{NumberField6}.clear();

#{NumberField7}.clear();
#{NumberField8}.clear();
#{NumberField9}.clear();
#{NumberField10}.clear();
#{NumberField11}.clear();
#{NumberField12}.clear();
}
</script>
</ext:XScript>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<br />
<ext:Button ID="btnAdd" runat="server" Icon="Add" Text="Add Details">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Title="Add Details" Html="Adding Details..." />
</ToolTips>
<DirectEvents>
<Click OnEvent="BtnAddClick">
<EventMask ShowMask="true" Msg="Preparing to Add Details..." />
</Click>
</DirectEvents>
<Listeners>
<Click Handler="clearFields();" />
</Listeners>
</ext:Button>
<br />
<ext:FormPanel ID="FormPanelDetails" runat="server" BodyPadding="0" ButtonAlign="Center"
MonitorResize="true" Height="275" Width="540">
<Items>
<ext:Panel ID="Panel1" runat="server" Border="false" Layout="Form" BodyPadding="0">
<Items>
<ext:Container runat="server" ID="ContainerDetails" Padding="0">
<Items>
<ext:Panel ID="Details" runat="server" Title="Details" Icon="PageWhitePasteTable"
Frame="false" Border="false" ButtonAlign="Center" BodyPadding="5">
<Items>
<ext:Container ID="ContainerOuterDetails" runat="server" Layout="Column">
<Items>
<ext:Container runat="server" ID="ContainerOuterDetailsLeft" Layout="Form" ColumnWidth=".5">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="5" Border="false">
<Items>
<ext:FieldContainer ID="FieldContainer1" runat="server" FieldLabel="State 1" Layout="HBoxLayout">
<Items>
<ext:SelectBox ID="SelectBox1" runat="server" DisplayField="state" ValueField="abbr"
EmptyText="Select a state...">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="state" />
<ext:ModelField Name="nick" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:SelectBox>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer2" runat="server" FieldLabel="NumberField1"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField1" runat="server" EmptyText="NumberField1" Width="135"
MinValue="0" AllowBlank="false" HideTrigger="true" Name="NumberField1" DataIndex="NumberField1"
AllowDecimals="true" DecimalPrecision="4" TabIndex="3" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer3" runat="server" FieldLabel="NumberField2"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField2" runat="server" EmptyText="NumberField2" Width="135"
MinValue="0" AllowBlank="false" Name="NumberField2" HideTrigger="true" AllowDecimals="true"
DecimalPrecision="2" TabIndex="5" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer4" runat="server" FieldLabel="NumberField3"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField3" runat="server" MinValue="0" Width="135" HideTrigger="true"
Name="NumberField3" EmptyText="NumberField3" AllowBlank="false" AllowDecimals="false"
TabIndex="7" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer5" runat="server" FieldLabel="NumberField4"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField4" runat="server" EmptyText="NumberField4" MinValue="0"
Width="135" HideTrigger="true" AllowBlank="false" AllowDecimals="false" Name="NumberField4"
TabIndex="9" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer6" runat="server" FieldLabel="NumberField5"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField5" runat="server" EmptyText="NumberField5" MinValue="0"
Width="135" HideTrigger="true" AllowBlank="false" AllowDecimals="false" Name="NumberField5"
TabIndex="9" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer7" runat="server" FieldLabel="NumberField6"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField6" runat="server" EmptyText="NumberField6" MinValue="0"
Width="135" HideTrigger="true" AllowBlank="false" AllowDecimals="false" Name="NumberField6"
TabIndex="9" />
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
</ext:Container>
<ext:Container runat="server" ID="ContainerOuterDetailsRight" Layout="Form" ColumnWidth=".5">
<Items>
<ext:FormPanel ID="FormPanel2" runat="server" BodyPadding="5" Border="false">
<Items>
<ext:FieldContainer ID="FieldContainer8" runat="server" FieldLabel="State 2" Layout="HBoxLayout">
<Items>
<ext:SelectBox ID="SelectBox2" runat="server" DisplayField="state" ValueField="abbr"
EmptyText="Select a state...">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="state" />
<ext:ModelField Name="nick" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:SelectBox>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer9" runat="server" FieldLabel="NumberField7"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField7" runat="server" EmptyText="NumberField7" MinValue="0"
Width="135" AllowBlank="false" AllowDecimals="false" HideTrigger="true" Name="NumberField7"
TabIndex="4" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer10" runat="server" FieldLabel="NumberField8"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField8" runat="server" EmptyText="NumberField8" MinValue="0"
Width="135" AllowBlank="false" AllowDecimals="false" HideTrigger="true" Name="NumberField8"
TabIndex="6" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer11" runat="server" FieldLabel="NumberField9"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField9" runat="server" EmptyText="NumberField9" MinValue="0"
Width="135" AllowBlank="false" AllowDecimals="false" MaxLength="6" DecimalPrecision="3"
Name="NumberField9" HideTrigger="true" TabIndex="8" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer12" runat="server" FieldLabel="NumberField10"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField10" runat="server" EmptyText="NumberField10" MinValue="0"
Width="135" AllowBlank="false" AllowDecimals="false" HideTrigger="true" Name="NumberField10"
TabIndex="10" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer13" runat="server" FieldLabel="NumberField11"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField11" runat="server" EmptyText="NumberField11" MinValue="0"
Width="135" AllowBlank="false" AllowDecimals="false" HideTrigger="true" Name="NumberField11"
TabIndex="10" />
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer14" runat="server" FieldLabel="NumberField12"
Layout="HBoxLayout">
<Items>
<ext:NumberField ID="NumberField12" runat="server" EmptyText="NumberField12" MinValue="0"
Width="135" AllowBlank="false" AllowDecimals="false" HideTrigger="true" Name="NumberField12"
TabIndex="10" />
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" Height="25" Hidden="true" />
</BottomBar>
</ext:FormPanel>
</body>
</html>

geoffrey.mcgill
Jul 12, 2012, 3:48 AM
Confirmed. I'm not getting anywhere near 5-6 seconds, but there certainly does appear to be a performance issue (<1 sec for me).

When I run a client-side profiler, there's lots of extra calls to unnecessary functions within ExtJS. We are looking into a fix.

The following is a simplified version of your original. With future posts, please attempt to remove any code unrelated to the problem.

Example


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
NumberField1.Number = 1;
NumberField2.Number = 2;
NumberField3.Number = 3;
NumberField4.Number = 4;
NumberField5.Number = 5;
NumberField6.Number = 6;
NumberField7.Number = 7;
NumberField8.Number = 8;
NumberField9.Number = 9;
NumberField10.Number = 10;
NumberField11.Number = 11;
NumberField12.Number = 12;
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Form Panel - Ext.NET Examples</title>
<ext:XScript ID="XScript1" runat="server">
<script language="javascript" type="text/javascript">
var clearFields = function () {
#{NumberField1}.clear();
#{NumberField2}.clear();
#{NumberField3}.clear();
#{NumberField4}.clear();
#{NumberField5}.clear();
#{NumberField6}.clear();

#{NumberField7}.clear();
#{NumberField8}.clear();
#{NumberField9}.clear();
#{NumberField10}.clear();
#{NumberField11}.clear();
#{NumberField12}.clear();
};
</script>
</ext:XScript>
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" />


<ext:Button runat="server" Text="Clear">
<Listeners>
<Click Fn="clearFields" />
</Listeners>
</ext:Button>
<ext:FormPanel runat="server" Width="540">
<Items>
<ext:NumberField
ID="NumberField1"
runat="server"
EmptyText="NumberField1"
Width="135"
MinValue="0"
AllowBlank="false"
HideTrigger="true"
Name="NumberField1"
DataIndex="NumberField1"
AllowDecimals="true"
DecimalPrecision="4"
TabIndex="3"
/>


<ext:NumberField
ID="NumberField2"
runat="server"
EmptyText="NumberField2"
Width="135"
MinValue="0"
AllowBlank="false"
Name="NumberField2"
HideTrigger="true"
AllowDecimals="true"
DecimalPrecision="2"
TabIndex="5"
/>

<ext:NumberField
ID="NumberField3"
runat="server"
MinValue="0"
Width="135"
HideTrigger="true"
Name="NumberField3"
EmptyText="NumberField3"
AllowBlank="false"
AllowDecimals="false"
TabIndex="7"
/>


<ext:NumberField
ID="NumberField4"
runat="server"
EmptyText="NumberField4"
MinValue="0"
Width="135"
HideTrigger="true"
AllowBlank="false"
AllowDecimals="false"
Name="NumberField4"
TabIndex="9"
/>


<ext:NumberField
ID="NumberField5"
runat="server"
EmptyText="NumberField5"
MinValue="0"
Width="135"
HideTrigger="true"
AllowBlank="false"
AllowDecimals="false"
Name="NumberField5"
TabIndex="9"
/>


<ext:NumberField
ID="NumberField6"
runat="server"
EmptyText="NumberField6"
MinValue="0"
Width="135"
HideTrigger="true"
AllowBlank="false"
AllowDecimals="false"
Name="NumberField6"
TabIndex="9"
/>


<ext:NumberField
ID="NumberField7"
runat="server"
EmptyText="NumberField7"
MinValue="0"
Width="135"
AllowBlank="false"
AllowDecimals="false"
HideTrigger="true"
Name="NumberField7"
TabIndex="4"
/>


<ext:NumberField
ID="NumberField8"
runat="server"
EmptyText="NumberField8"
MinValue="0"
Width="135"
AllowBlank="false"
AllowDecimals="false"
HideTrigger="true"
Name="NumberField8"
TabIndex="6"
/>


<ext:NumberField
ID="NumberField9"
runat="server"
EmptyText="NumberField9"
MinValue="0"
Width="135"
AllowBlank="false"
AllowDecimals="false"
MaxLength="6"
DecimalPrecision="3"
Name="NumberField9"
HideTrigger="true"
TabIndex="8"
/>


<ext:NumberField
ID="NumberField10"
runat="server"
EmptyText="NumberField10"
MinValue="0"
Width="135"
AllowBlank="false"
AllowDecimals="false"
HideTrigger="true"
Name="NumberField10"
TabIndex="10"
/>


<ext:NumberField
ID="NumberField11"
runat="server"
EmptyText="NumberField11"
MinValue="0"
Width="135"
AllowBlank="false"
AllowDecimals="false"
HideTrigger="true"
Name="NumberField11"
TabIndex="10"
/>


<ext:NumberField
ID="NumberField12"
runat="server"
EmptyText="NumberField12"
MinValue="0"
Width="135"
AllowBlank="false"
AllowDecimals="false"
HideTrigger="true"
Name="NumberField12"
TabIndex="10"
/>
</Items>
</ext:FormPanel>
</body>
</html>

Daniil
Jul 12, 2012, 10:21 AM
Hi,

I am afraid we can't improve it much if the fields must be validated after clearing and the emptyText must be applied.

I think this delay is mainly due to the validation process. So, if can be omitted, you can replace each "clear" calling with:

#{NumberField1}.setRawValue("");
#{NumberField1}.applyEmptyText();

I think it should work much faster.

The clear method looks:

function () {
this.setValue("");
}

The setValue method also runs the change detection.

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Base-method-setValue
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Base-method-setRawValue

Vladimir
Jul 12, 2012, 11:00 AM
Each of field clearing relayouts the FormPanel. it is required to suspend layout before and resume layout after


var clearFields = function () {
Ext.suspendLayouts(); // suspend layout


#{NumberField1}.clear();
#{NumberField2}.clear();
#{NumberField3}.clear();
#{NumberField4}.clear();
#{NumberField5}.clear();
#{NumberField6}.clear();

#{NumberField7}.clear();
#{NumberField8}.clear();
#{NumberField9}.clear();
#{NumberField10}.clear();
#{NumberField11}.clear();
#{NumberField12}.clear();


Ext.resumeLayouts(true); // resume layout, update FormPanel
};

Fahd
Jul 12, 2012, 3:27 PM
Thanks for all the suggestions!

I tried your suggestions and now the site is working a little faster BUT it is still a lot slower than 1.4. Can you please let me know when you have a fix
for all the "extra calls to unnecessary functions within ExtJS" ?

Thanks!


Each of field clearing relayouts the FormPanel. it is required to suspend layout before and resume layout after


var clearFields = function () {
Ext.suspendLayouts(); // suspend layout


#{NumberField1}.clear();
#{NumberField2}.clear();
#{NumberField3}.clear();
#{NumberField4}.clear();
#{NumberField5}.clear();
#{NumberField6}.clear();

#{NumberField7}.clear();
#{NumberField8}.clear();
#{NumberField9}.clear();
#{NumberField10}.clear();
#{NumberField11}.clear();
#{NumberField12}.clear();


Ext.resumeLayouts(true); // resume layout, update FormPanel
};

Daniil
Jul 31, 2012, 10:42 AM
I tried your suggestions and now the site is working a little faster BUT it is still a lot slower than 1.4.


Little faster? Well, the Vladimir's suggestion extremely improved performance when I tried it, the fields are cleared just after I click the Button.

Please clarify what browser are you testing with?

I have tried with the latest FireFox, Chrome and IE9.



Can you please let me know when you have a fix for all the "extra calls to unnecessary functions within ExtJS" ?


I am afraid we can't avoid these extra calls without deep re-working the ExtJS layout mechanisms. Maybe, it will be improved in the next ExtJS releases.

Fahd
Jul 31, 2012, 2:35 PM
It is faster, I agree.

Our intranet uses IE8.

Thanks again.


Little faster? Well, the Vladimir's suggestion extremely improved performance when I tried it, the fields are cleared just after I click the Button.

Please clarify what browser are you testing with?

I have tried with the latest FireFox, Chrome and IE9.



I am afraid we can't avoid these extra calls without deep re-working the ExtJS layout mechanisms. Maybe, it will be improved in the next ExtJS releases.

Daniil
Jul 31, 2012, 4:55 PM
Thanks for confirmation.

I also can't see a significant delay in IE8.

By the way, I would try to replace:

Ext.resumeLayouts(true);
with

Ext.resumeLayouts();

Though I'm not 100% sure it won't break anything.

Fahd
Jul 31, 2012, 6:28 PM
I replace:

Ext.resumeLayouts(true);
with

Ext.resumeLayouts();
and it works fine, it didn't break anything.

Thanks.


Thanks for confirmation.

I also can't see a significant delay in IE8.

By the way, I would try to replace:

Ext.resumeLayouts(true);
with

Ext.resumeLayouts();

Though I'm not 100% sure it won't break anything.

Daniil
Jul 31, 2012, 7:59 PM
and it works fine

Did it improve the performance, right? How much would you estimate the improvement?

Fahd
Aug 01, 2012, 5:32 PM
Yes it did, I would say like 25%


Did it improve the performance, right? How much would you estimate the improvement?

Daniil
Aug 02, 2012, 8:29 AM
Ok, thanks.

I decided to ask a Sencha's opinion on this issue.
http://www.sencha.com/forum/showthread.php?234813

Lets wait what they will answer. If answer:)

Fahd
Aug 02, 2012, 2:03 PM
Its pretty Detailed...

Lets see what there response is...


Ok, thanks.

I decided to ask a Sencha's opinion on this issue.
http://www.sencha.com/forum/showthread.php?234813

Lets wait what they will answer. If answer:)

Daniil
Aug 02, 2012, 3:51 PM
There is some discussion already.

Daniil
Aug 06, 2012, 6:55 AM
The results are:

1. We made the change in Ext.NET which improved the performance.

2. Sencha made another change which also improved the performance. But it will appear when we upgrade Ext.NET to the next official ExtJS release. I will monitor.

3. For now you can use:

Ext.suspendLayouts();
//the code to clear the fields
Ext.resumeLayouts(); // Without "true". It should not break anything.

Thanks again for the report.

Fahd
Aug 08, 2012, 6:32 PM
Not a problem, please let me know when the Ext.NET v2.1 is released.


The results are:

1. We made the change in Ext.NET which improved the performance.

2. Sencha made another change which also improved the performance. But it will appear when we upgrade Ext.NET to the next official ExtJS release. I will monitor.

3. For now you can use:

Ext.suspendLayouts();
//the code to clear the fields
Ext.resumeLayouts(); // Without "true". It should not break anything.

Thanks again for the report.

geoffrey.mcgill
Aug 08, 2012, 6:37 PM
Not a problem, please let me know when the Ext.NET v2.1 is released.

When v2.1 is publicly released, it will be available for download from http://www.ext.net/download/.

Hope this helps.

Daniil
Dec 29, 2012, 6:25 AM
2. Sencha made another change which also improved the performance. But it will appear when we upgrade Ext.NET to the next official ExtJS release. I will monitor.


I think this change is already in the trunk.