FormPanel submitted form data

2010-07-30  来源:本站原创  分类:Web  人气:265 

Today, studies of FormPanel submit the form data for a long time .. finally successful form submission ... While the recall issue, so to sum up:

1. Practical FormPanel how to submit form:

In Ext in the FormPanel and does not save form data in which data is stored by the BasicForm, the time required in the submission form for the current FormPanel the BasicForm to be submitted.

Get FormPanel in BasicForm object code is as follows:

Js code

  1. var pnlLogin = new Ext.FormPanel ((
  2. / / Omitted
  3. ));
  4. / / Get BasicForm object
  5. pnlLogin.getForm ();

var pnlLogin = new Ext.FormPanel({
    // Omit
});

// Gets the BasicForm object
pnlLogin.getForm();

Get BasicForm object in the form can be submitted for action ... There needs to check BasicForm the API documentation, the document said, need to call the submit (); method submitted:

BasicForm submit method writes API

submit (Object options): BasicForm

Shortcut to do a submit action.

Parameters:

* Options: Object
The options to pass to the action (see doAction for details)

Returns:

* BasicForm
this

Know from the API documentation, submit method is actually called BasicForm of doAction () method, which doAction release API documentation in the description is as follows:

BasicForm doAction () API writes

doAction (String / Object actionName, [Object options]): BasicForm

Performs a predefined action (Ext.form.Action.Submit or Ext.form.Action.Load) or a custom extension of Ext.form.Action to perform application-specific processing.

Parameters:

* ActionName: String / Object
The name of the predefined action type, or instance of Ext.form.Action to perform.
* Options: Object
(Optional) The options to pass to the Ext.form.Action. All of the config options listed below are supported by both the submit and load actions unless otherwise noted (custom actions could also accept other config options):
o url: String

The url for the action (defaults to the form's url.)
o method: String

The form method to use (defaults to the form's method, or POST if not defined)
o params: String / Object

The params to pass (defaults to the form's baseParams, or none if not defined)
o headers: Object

Request headers to set for the action (defaults to the form's default headers)
o success: Function

The callback that will be invoked after a successful response. Note that this is HTTP success (the transaction was sent and received correctly), but the resulting response data can still contain data errors. The function is passed the following parameters:
+ Form: Ext.form.BasicForm
The form that requested the action
+ Action: Ext.form.Action
The Action class. The result property of this object may be examined to perform custom postprocessing.

o failure: Function

The callback that will be invoked after a failed transaction attempt. Note that this is HTTP failure, which means a non-successful HTTP code was returned from the server. The function is passed the following parameters:
+ Form: Ext.form.BasicForm
The form that requested the action
+ Action: Ext.form.Action
The Action class. If an Ajax error ocurred, the failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.

o scope: Object

The scope in which to call the callback functions (The this reference for the callback functions).
o clientValidation: Boolean

Submit Action only. Determines whether a Form's fields are validated in a final call to isValid prior to submission. Set to false to prevent this. If undefined, pre-submission field validation is performed.

Returns:

* BasicForm
this

Here actionName can only load and submit. Of course, when submitted using the submit ...

Read the API documentation so many, in fact, operate on the form submission is not the end of the description from the doAction way .. you can see here is actually called Ext.form.Action this class, and submit the operation is called the subclass Ext.form.Action.Submit ... around in a circle, finally FormPanel Ext how to submit the form in the principle of engaging almost over .. it could be down the code:

Java code

  1. var winLogin = new Ext.Window ((
  2. title: 'Login',
  3. renderTo: Ext.getBody (),
  4. width: 350,
  5. bodyStyle: 'padding: 15px;',
  6. id: 'login-win',
  7. buttonAlign: 'center',
  8. modal: true,
  9. items: [(
  10. xtype: 'form',
  11. defaultType: 'textfield',
  12. bodyStyle: 'padding: 5px',
  13. baseCls: 'x-plaints',
  14. url: 'ajaxLogin.do',
  15. method: 'POST',
  16. defaults: (
  17. anchor: '95% ',
  18. allowBlank: false
  19. )
  20. items: [(
  21. id: 'loginName',
  22. name: 'loginName',
  23. fieldLabel: 'User Name',
  24. emptyText: 'Please enter user name'
  25. blankText: 'user name can not be empty'
  26. ), (
  27. id: 'password',
  28. name: 'password',
  29. fieldLabel: 'Password'
  30. blankText: 'Password can not be empty'
  31. )]
  32. )],
  33. buttons: [(
  34. text: 'login',
  35. handler: function () (
  36. / / Get the form object
  37. var loginForm = this. ownerCt.findByType ('form') [0]. getForm ();
  38. alert (loginForm.getValues (). loginName);
  39. loginForm.doAction ('submit', (
  40. url: 'ajaxLogin.do',
  41. method: 'POST',
  42. waitMsg: 'are landing ...',
  43. timeout: 10000, / / 10 second timeout,
  44. <SPAN> Params: loginForm.getValues (),// get the form data </ SPAN>
  45. success: function (form, action) (
  46. var isSuc = action.result.success;
  47. if (isSuc) (
  48. / / Prompt the user login successfully
  49. Ext.Msg.alert ('message', 'login successful ..');
  50. )
  51. )
  52. failure: function (form, action) (
  53. alert ('login failure');
  54. )
  55. ));
  56. this. ownerCt.close ();
  57. )
  58. ), (
  59. text: 'Reset'
  60. handler: function () (
  61. alert ('reset');
  62. this. ownerCt.findByType ('form') [0]. getForm (). reset ();
  63. )
  64. )]
  65. ));
  66. winLogin.show ();

var winLogin = new Ext.Window({
        title:' Login  ',
        renderTo:Ext.getBody(),
        width:350,
        bodyStyle:'padding:15px;',
        id:'login-win',
        buttonAlign:'center',
        modal:true,
        items:[{
                xtype:'form',
                defaultType:'textfield',
                bodyStyle : 'padding:5px',
                baseCls : 'x-plaints',
                url:'ajaxLogin.do',
                method:'POST',
                defaults:{
                        anchor:'95%',
                        allowBlank:false
                },
                items:[{
                        id:'loginName',
                        name:'loginName',
                        fieldLabel:' User name  ',
                        emptyText:' Please enter username  ',
                        blankText:' User name cannot be empty  '
                },{
                        id:'password',
                        name:'password',
                        fieldLabel:' Password  ',
                        blankText:' The password cannot be empty  '
                }]
        }],
        buttons:[{
                text:' Login  ',
                handler:function(){
                        // Gets the form objects
                        var loginForm = this.ownerCt.findByType('form')[0].getForm();
                        alert(loginForm.getValues().loginName);
                        loginForm.doAction('submit', {
                                url:'ajaxLogin.do',
                                method:'POST',
                                waitMsg:' Are landing  ...',
                                timeout:10000,//10 SEC timeout  ,
                                params:loginForm.getValues(),// Gets the form data
                                success:function(form, action){
                                        var isSuc = action.result.success;
                                        if(isSuc) {
                                                // Prompt user login successful
                                                Ext.Msg.alert(' Message ', ' login successful  ..');
                                        }
                                },
                                failure:function(form, action){
                                        alert(' Login failed  ');
                                }
                        });
                        this.ownerCt.close();
                }
        }, {
                text:' Reset  ',
                handler:function(){
                        alert('reset');
                        this.ownerCt.findByType('form')[0].getForm().reset();
                }
        }]
});
winLogin.show();

Note the red part of the ... here is get all the form elements BaiscForm value and has String / Object key pair is stored. . The method described in the api documentation as follows:

BasicForm getValues API writes

getValues ([Boolean asString]): String / Object

Returns the fields in this form as an object with key / value pairs as they would be submitted using a standard form submit. If multiple fields exist with the same name they are returned as an array.
Parameters:

* AsString: Boolean
(Optional) false to return the values as an object (defaults to returning as a string)

Returns:

* String / Object

Resolved to submit the form so presented can not send data when the problem ....

Here finally resolved the issue of how to submit the form ...

2. Why did not submit the success implementation of the method, failure is to be executed at what time ..

Action here is still the need to find success in the property class API documentation describes ...

Action success attributes API writes

success: Function

The function to call when a valid success return packet is recieved. The function is passed the following parameters:

* Form: Ext.form.BasicForm
The form that requested the action
* Action: Ext.form.Action
The Action class. The result property of this object may be examined to perform custom postprocessing.

Here success method requires two parameters, in particular the description of the second argument: in particular result, you can click here

Click to jump to the Action result immediately after the description of property:

Action result attribute API writes

result: Object

The decoded response object containing a boolean success property and other, action-specific properties.

Have known this description, the server returns the response needs to include the success of a boolean type field, the field will be saved in the result of, Action Council for the description of the field to determine whether the method of implementation success. .

The server to return success boolean type field do? Server segment of code as follows:

Java code

  1. try (
  2. / / Return the successful identification
  3. <SPAN> Response.getWriter (). Println ("(success: true }");</ SPAN>
  4. response.getWriter (). flush ();
  5. ) Catch (IOException e) (
  6. e.printStackTrace ();
  7. ) Finally (
  8. try (
  9. response.getWriter (). close ();
  10. ) Catch (IOException e) (
  11. e.printStackTrace ();
  12. )
  13. )

In fact, what form or to use ajax to submit personally feel better.
For example:

Javascript code

  1. var PostVal = baseForm.getForm (). getValues ();
  2. / / Modify the value of the content to be submitted very convenient. Joined with ID field, modify its value only this:
  3. PostVal.ID = 2;
  4. Ext.Ajax.request ((
  5. url:'',
  6. success: function (response, opts) (
  7. var action = Ext.decode (response.responseText);
  8. )
  9. params: PostVal
  10. ));

Java code

  1. request (Object options): Number
  2. Sends an HTTP request to a remote server. Important: Ajax server requests are asynchronous, and this call will retu ...
  3. Sends an HTTP request to a remote server.
  4. Important: Ajax server requests are asynchronous, and this call will return before the response has been received. Process any returned data in a callback function.
  5. Back Back to the format ("success": true, "message": "ok")
  6. Ext.Ajax.request ((
  7. url: 'ajax_demo / sample.json',
  8. success: function (response, opts) (
  9. / / Ext.decode to resolve json
  10. var obj = Ext.decode (response.responseText);
  11. Ext.Msg.alert ('', obj.message);
  12. )
  13. failure: function (response, opts) (
  14. console.log ('server-side failure with status code' + response.status);
  15. )
  16. ));
  17. Attention

request( Object options ) : Number
Sends an HTTP request to a remote server. Important: Ajax server requests are asynchronous, and this call will retu...
Sends an HTTP request to a remote server.

Important: Ajax server requests are asynchronous, and this call will return before the response has been received. Process any returned data in a callback function.
 Returns the format for the background   {"success":true,"message":"ok"}

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
     //Ext.decode  To resolve the  json
      var obj = Ext.decode(response.responseText);
      Ext.Msg.alert('',obj.message);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});
 Note

success: function (response, opts) inside the parameters of the order of
response for the need to parse json
success: Function (Optional)
The function to be called upon success of the request. The callback is passed the following parameters:
response: Object
The XMLHttpRequest object containing the response data.
options: Object
The parameter to the request call.

submit (Object options): BasicForm
Shortcut to do a submit action.
Shortcut to do a submit action.
Parameters:
options: Object
The options to pass to the action (see doAction for details).

Note: this is ignored when using the standardSubmit option.

The following code:

myFormPanel.getForm (). submit ((
clientValidation: true,
url: 'updateConsignment.php',
params: (
newStatus: 'delivered'
)
success: function (form, action) (
/ / Like to note that success: function (form, action) parameters of the problem. The easiest way view
var i ='';
for (var o in action) i + = o + '';
alert (i);
Ext.Msg.alert ('Success', action.result.message);
)
failure: function (form, action) (
Ext.Msg.alert ('Failure', action.result.message);
)
));
would process the following server response for a successful submission:
(
"Success": true, / / note this is Boolean, not string
"Msg": "Consignment updated"
)
and the following server response for a failed submission:
(
"Success": false, / / note this is Boolean, not string
"Msg": "You do not have permission to perform this operation"
)

相关文章
  • FormPanel submitted form data 2010-07-30

    Today, studies of FormPanel submit the form data for a long time .. finally successful form submission ... While the recall issue, so to sum up: 1. Practical FormPanel how to submit form: In Ext in the FormPanel and does not save form data in which d

  • Chapter IV Servlet processing form data 2010-03-31

    Chapter IV Servlet processing form data 4.1 HTML forms, such as: input, checkbox, and list and so on. 4.1.1 Form to use: <form method="post" action="/servlet/addMessage"> </ form> 4.1.2 Input text to use: <input type=&qu

  • Part IV: passing form data (MVC course of the case (based on the ASP.NET MVC beta)) 2010-07-30

    Summary This will complete our "MVC announcement system" announcement function, this shows how the ASP.NET MVC in the form of data transfer processing. Preface By the former articles, we have to compare ease of use ASP.NET MVC to render pages an

  • PHP form data in three ways to obtain 2010-07-31

    PHP form data to obtain the three methods, and the difference between as follows Form part of the code: <form name="form1" method="post" action=""> <input type="text" name="username"> <input

  • Using jQuery to achieve submit form data asynchronously 2010-08-18

    The traditional form form as follows: <form name="input" action="recv.cgi" method="post"> Username: <input type="text" name="user" /> <input type="submit" value="Submit"

  • Panel for your FormPanel or load data 2010-09-28

    EXTJs form in the development of procedures, we often need to work FormPanel data editing, and editing data, the data need to crawl back to the server and populate the controls in the form to take to complete the backfilling of data to work so that t

  • Part IV: Passing form data (MVC case tutorial (based on the ASP.NET MVC beta)) 2010-11-05

    Abstract This article will complete our "MVC announcement system" announcement function, as demonstrated in the ASP.NET MVC, how to pass form data processing. Preface Through the previous articles, we have been able to use the ASP.NET MVC relati

  • JSP form data stored in a generic way 2011-01-06

    Two common forms of data storage and processing methods 1, corresponding to each form of code are written In the JSP page or JavaBean or Servlet, use the request. Getparameter () function extracts the form data submitted one by one, or the preparatio

  • HttpClient 4 using the POST method to submit examples of normal form data 2010-03-29

    import java.io.BufferedReader; import java.io.InputStreamReader; import org.apache.http.HttpEntity; import org.apache.http.HttpHost; import org.apache.http.HttpResponse; import org.apache.http.client.methods.HttpPost; import org.apache.http.conn.para

  • Better form data validation package 2010-04-08

    /***** ***** Validate form data form ***** ***** ********/ function CheckForm (oForm) ( var els = oForm.elements; / / Loop through all table elements / / Alert (els.length); for (var i = 0; i <els.length; i + +) ( / / Alert (els [i]. GetAttribute (&quo

  • Browser cache form data 2010-08-22

    Ticket services, contact page, the server transfer over the user booking number 3 (corresponding to form data for the <input type="usernum" value="3"/>), Js dynamic deletion of users take advantage of the number of people, the la

  • extjs submit form data and load data FormPanel 2010-11-08

    In the use of Extjs, in addition to GridPanel think should be the most used is FormPanel, and in the use of FormPanel certainly missed, and loading the data submitted, and now I have summarized the data submitted under the FormPanel and loading metho

  • form does not submit the form data 2010-12-01

    Today knot a day, and good pain ah! ! ! I have four pages of the div then div nested div can add a div the same in all the js to build a div html = and then add content and specify the div.append (html); Form is not submitted to the newly added data,

  • Test the legality of a form data type of js 2009-05-23

    Reference to a number of other people's code, its own form to write a test the legality of the js data type function ValidForm(formObj){ function validateOnChange(){ var textfield = this; var pattern = textfield.getAttribute("pattern").toString(

  • struts 1 inside how to automatically submit form data the attention of multi-line point 2010-03-29

    1. If the use of javascript in the html tag inside reference to indexid, then you can use the struts el. Or use "% = =%" 2. If OK remove the feature, not directly delete the row data, with the hidden options. Otherwise, the page will refresh bea

  • struts html tags automatically save submitted form values. 2010-04-01

    JSP submitted before we even made if the value after the value of how to do it? Should be made to set the value of the action, and to this value to value. <input type="text" name="user" value="<%=request.getAttribute("u

  • IE use JavaScript's window.open function in a new window export EXCEL XML form data processing error 2010-06-09

    Sometimes, according to customer demand, the need to export the data to the XML form template EXCEL. During this operation, in order not to overwrite the previous export window user interface, you need to open a new browser window goals, operate in a

  • editegrid submitted revised data 2010-06-10

    Application of others to submit a editgird (ext) modified the code data showProcessMsg(' Saving data, please wait ',' Saving in '); Grid.stopEditing(); var modifiedItems = Grid.getStore().modified; var jsonData = convertRecordsToJson(modifiedItems);

  • Programmed to automatically submit web form data 2010-06-11

    MSHTML is a Microsoft COM component, the component encapsulates all the HTML language elements and their attributes, provided by a standard interface, you can access all the elements specified page. MSHTML object model is composed of a number of obje

  • jsp and js are two ways to get to the form data 2010-05-13

    <form action="" method="post" onsubmit="return check()" name="selectform"> <input type="radio" name="gender" value="man" checked/> Male <input type="radio" name