PDA

View Full Version : Ext JS Forms verse using Container with "form" layout



scgrif32
14 Dec 2012, 11:50 AM
Hello All,

I am in need of your help with researching the benefits of using a Form to handle post (Form.Submit() method) data instead of using a Container with a "form" layout and posting the data via Ajax request (Ext Direct method instead of "api" configuration in form to handle form submission).

What are the benefits of using the Form class? Benefits of not using the Form class?

Any help would be greatly appreciated.

Thanks,

Shawn

evant
14 Dec 2012, 8:56 PM
In short:

form.Panel doesn't really provide you with much, it's basically just a panel with an anchor layout as the default. However, it also creates an instance of Ext.form.Basic, which is where the form utility comes from.

So basically, if you don't need Ext.form.Basic then you can just use a container and manage it yourself. But you probably shouldn't, since the form functionality already exists.

scgrif32
17 Dec 2012, 11:00 AM
Evan,

Thank you for your response. I guess what I am really in need of knowing is what the pitfalls of not using a form are verses the benefits of using a form? Is this a cost to using form.Panel when it comes to performance and speed of the application?

Thanks,

Shawn

evant
17 Dec 2012, 2:36 PM
The form functionality shouldn't really add an extra overhead and it helps in quite a number of areas, mainly form submission and group validation handling, amongst other things.

scgrif32
17 Dec 2012, 9:50 PM
Evan (or anyone else),

What might those other things be? Especially, if the form functionality is NOT being used (i.e. container with a form layout submitting data via Ajax)?

Thanks,

Shawn

evant
17 Dec 2012, 10:01 PM
I'd say check out the API: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic

As a quick summary:

1) It tracks of the fields under the form in a collection, a container won't.
2) Allows you to do bulk operations on all fields (are any fields dirty, are they valid).
3) loadRecord/updateRecord for model binding
4) Submit

scgrif32
18 Dec 2012, 1:03 PM
Evan,

I am familiar with the API doc's but am not familiar with the pros/cons of using Ext.form.Basic over a non form processing data via Ajax. Do the pros outweigh the cons?

Thanks,

Shawn

evant
18 Dec 2012, 1:33 PM
Do you need to do anything in 1-4? If so, then you should use it.

I can't really go into much more detail because I don't know your use case.

scgrif32
18 Dec 2012, 2:42 PM
Evan,

Yes, I have been in debate with a fellow developer about recreating the wheel when it comes to using Ext JS forms. They feel a form is overkill when the same can be accomplished using a container and managing the form submission via an Ajax Request (Direct method).

I disagree because you have additional functionality in the Ext.form.Basic and Ext.form.action.Submit classes that are already available if you use a form panel. I just need arguments to support my stance because we are trying to standardize whether to use a form and all of the available functionality or a container submitting the data via Ajax.

Could use your help with solidifying that decision.

Thanks,

Shawn

evant
18 Dec 2012, 3:08 PM
I don't really see why there's any contention. How is it "overkill" to use functionality that already exists?

Will it be more efficient if you roll your own? Probably. The nature of a framework is that it works in a fairly generic fashion, you may not need/be using all of the features.

You could make the same argument about Ext.panel.Panel. If you made a custom one, it would probably be more efficient than the default class, because you could build in only the functionality you needed.

But is it worth it? That's entirely up to you. However it seems like an odd decision to avoid using functionality in the framework without having a solid reason. In terms of convincing, it really should be the other way around. Why should you not use it?

scgrif32
18 Dec 2012, 3:25 PM
Evan,

I agree 100%. The argument is that using the form functionality is "expensive" because the entire form class is downloaded when only 5-15% is potentially needed.

Yes, writing your own probably would be more efficient and time consuming which is why I have kept my stance on using the built in functionality and extending where ever need be.

Oh, the argument has been made about over using a Panel when a container can be used. There is support for this argument but I don't feel the same can be said when it comes to using an Ext's form functionality.

I wrote research and found very little documentation to support non-use of Ext's form class. I used version 3 or Ext JS and recall having to use an Ajax Request to post data but not having to do so now is MUCH more efficient in my opinion.

You have anything else I could use as fire power to seal the deal on this discussion?

Thanks again for your previous responses.

Shawn Griffin

evant
18 Dec 2012, 3:42 PM
To clarify, you do mean you want to use the Ext.form.field classes, we're only explicitly talking about using a container with Ext.form.field.* as opposed to using a form.Panel with Ext.form.field.*?

scgrif32
19 Dec 2012, 12:20 AM
Evan,

I have been discussing using an Ext.container with Ext.form.field.* in place of using Ext.form.Panel with Ext.form.field.*. Submitting the data via POST but not using theExt.form.action.Submit class. The discussion was why use the form class to handle form submission when you can use a less expensive method such as explicitly getting the values from the form and submitting via Ajax?

Any comments?

Thanks,

Shawn Griffin

evant
19 Dec 2012, 4:55 AM
Less expensive? Have you measured it? Sounds like micro optimization to me ;)

scgrif32
19 Dec 2012, 8:07 AM
Evan,

Not quite sure how to measure if downloading the entire or even part of the "Ext.form.*" class results in a performance lose.

How much of a performance lose (if any) does one incur by using any of the "Ext.form.*" class(es)? Not really sure if a user having to wait for all of the classes being used by the application to load is a big deal but that is probably the biggest of the issues in this debate.

Thanks,

Shawn Griffin

evant
19 Dec 2012, 2:28 PM
form.Panel and form.Basic are tiny in comparison to all the field classes.

As I said above, I don't really see why it's needed this much discussion.

scgrif32
19 Dec 2012, 3:50 PM
Evan,

I may have posed the question the wrong way. The real issue at hand is whether to send all of the form data in bulk and extract the individual records on the server-side or explicitly extract the necessary form fields from the form on the client-side and send it to the server using a direct method in-line (not using form.submit() and the api config) with those form fields as parameters?

We are using stored procedures on the backend (C# .NET) to process the data and Ext Direct to handle the transmission of data from the client to the server and vice versa. We've found that using form.submit() sends all of the form data as an object and that we have to extract whatever necessary fields are required as parameters within the stored procedures once the data hits the backend. Maybe this is an issue with the way Direct works or potentially an issue with the way we are are creating/updating records in the database but if you have any direction to help us do this more efficiently that would be much appreciated.

Is there really any added benefit to using Ext.form.Basic (api config option) when in the end we still have to extract the individual field:value once the data hits our stored procedure(s) so that the proper fields can be passed to the stored procedure?

Thanks,

Shawn Griffin