PDA

View Full Version : [CLOSED] MVC Grid panel takes long time to load and browser wants to end script



AmitM
Apr 13, 2014, 6:31 AM
Hello, I was following this thread:
http://forums.ext.net/showthread.php?16230-CLOSED-Loading-data-in-store-take-too-long-browser-hangs

But it does not help. I have a grid panel that is loading approximately 200 rows with 21 columns and it takes around 2 minutes to load/render. The actual data comes back within 2.4s. This is an edit grid with BeforeBind events which is probably why it takes so long. Any help optimizing would be appreciated.

Here is one of the column sets. There are 7 corresponding to each day of the week.



Html.X().Column()
.Text("Monday")
.Width(180)
.Columns(
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("MondayAttend")
.Width(60)
.Text("Attended")
.Listeners(ls =>
{
ls.BeforeBind.Handler = "if (e.record.get('Monday') == '') e.config[0].disabled = true";
})
.Component(Html.X().Checkbox()),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("MondayIn")
.Width(60)
.Text("In")
.Listeners(ls =>
{
ls.BeforeBind.Handler = "if (e.record.get('Monday') == '') e.config[0].disabled = true";
ls.Edit.Handler = "return editAttendenceFn(e.record, 'MondayIn', 'MondayOut');";
})
.Component(
Html.X().TextField()
.Plugins(Html.X().InputMask()
.Mask("hi:mn aM")
.AllowInvalid(true)
.MaskSymbols(symbols =>
{
symbols.Add(new MaskSymbol() { Name = "h", Regex = "[01]" });
symbols.Add(new MaskSymbol() { Name = "i", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "m", Regex = "[0-5]" });
symbols.Add(new MaskSymbol() { Name = "n", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "a", Regex = "[aApP]" });

}
)
)
),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("MondayOut")
.Width(60)
.Text("Out")
.Listeners(ls =>
{
ls.BeforeBind.Handler = "if (e.record.get('Monday') == '') e.config[0].disabled = true";
ls.Edit.Handler = "return editAttendenceFn(e.record, 'MondayIn', 'MondayOut');";
})
.Component(
Html.X().TextField()
.Plugins(Html.X().InputMask()
.Mask("hi:mn aM")
.AllowInvalid(true)
.MaskSymbols(symbols =>
{
symbols.Add(new MaskSymbol() { Name = "h", Regex = "[01]" });
symbols.Add(new MaskSymbol() { Name = "i", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "m", Regex = "[0-5]" });
symbols.Add(new MaskSymbol() { Name = "n", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "a", Regex = "[aApP]" });

}
)
)
)
),


Thanks,
Amit

Vladimir
Apr 13, 2014, 7:23 AM
Hi
if you have 200 rows and at least 7 ComponentColumn then you have 1400 widgets for rendering, plus each text field has input mask plugin. It is very heavy for browser
I recommend to use separate window for editing (open window and edit selected row) and don't use ComponentColumn

Or use OverOnly mode
http://examples2.ext.net/#/GridPanel/ComponentColumn/Over_Editor/

or or you can try Buffered grid

http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/Buffered_Scrolling/

AmitM
Apr 14, 2014, 3:37 AM
seemed to do the trick!

I added:



.OverOnly(true)


to the relevant columns. I will see if the user is ok with the change in presentation.

-Amit