Clear Up
SharpKit Reference

Ext.form.action Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Action

The subclasses of this class provide actions to perform upon Forms.

Instances of this class are only created by a Form when the Form needs to perform an action such as submit or load. The Configuration options listed for this class are set through the Form's action methods: submit, load and doAction

The instance of Action which performed the action is passed to the success and failure callbacks of the Form's action methods (submit, load and doAction), and to the actioncomplete and actionfailed event handlers.

ActionConfig
ActionEvents
DirectLoad

Provides Ext.direct.Manager support for loading form data.

This example illustrates usage of Ext.direct.Direct to load a form through Ext.Direct.

  
var myFormPanel = new Ext.form.Panel({
            // configs for FormPanel
            title: 'Basic Information',
            renderTo: document.body,
            width: 300, height: 160,
            padding: 10,
            // configs apply to child items
            defaults: {anchor: '100%'},
            defaultType: 'textfield',
            items: [{
            fieldLabel: 'Name',
            name: 'name'
            },{
            fieldLabel: 'Email',
            name: 'email'
            },{
            fieldLabel: 'Company',
            name: 'company'
            }],
            // configs for BasicForm
            api: {
            // The server-side method to call for load() requests
            load: Profile.getBasicInfo,
            // The server-side must mark the submit handler as a 'formHandler'
            submit: Profile.updateBasicInfo
            },
            // specify the order for the passed params
            paramOrder: ['uid', 'foo']
            });
            // load the form
            myFormPanel.getForm().load({
            // pass 2 arguments to server side getBasicInfo method (len=2)
            params: {
            foo: 'bar',
            uid: 34
            }
            });
            

The data packet sent to the server will resemble something like:

  
[
            {
            "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
            "data":[34,"bar"] // note the order of the params
            }
            ]
            

The form will process a data packet returned by the server that is similar to the following format:

  
[
            {
            "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
            "result":{
            "success":true,
            "data":{
            "name":"Fred Flintstone",
            "company":"Slate Rock and Gravel",
            "email":"fred.flintstone@slaterg.com"
            }
            }
            }
            ]
            
DirectLoadConfig
DirectLoadEvents
DirectSubmit

Provides Ext.direct support for submitting form data.

This example illustrates usage of Ext.direct.Direct to submit a form through Ext.Direct.

  
var myFormPanel = new Ext.form.Panel({
            // configs for FormPanel
            title: 'Basic Information',
            renderTo: document.body,
            width: 300, height: 160,
            padding: 10,
            buttons:[{
            text: 'Submit',
            handler: function(){
            myFormPanel.getForm().submit({
            params: {
            foo: 'bar',
            uid: 34
            }
            });
            }
            }],
            // configs apply to child items
            defaults: {anchor: '100%'},
            defaultType: 'textfield',
            items: [{
            fieldLabel: 'Name',
            name: 'name'
            },{
            fieldLabel: 'Email',
            name: 'email'
            },{
            fieldLabel: 'Company',
            name: 'company'
            }],
            // configs for BasicForm
            api: {
            // The server-side method to call for load() requests
            load: Profile.getBasicInfo,
            // The server-side must mark the submit handler as a 'formHandler'
            submit: Profile.updateBasicInfo
            },
            // specify the order for the passed params
            paramOrder: ['uid', 'foo']
            });
            

The data packet sent to the server will resemble something like:

  
{
            "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
            "result":{
            "success":true,
            "id":{
            "extAction":"Profile","extMethod":"updateBasicInfo",
            "extType":"rpc","extTID":"6","extUpload":"false",
            "name":"Aaron Conran","email":"aaron@sencha.com","company":"Sencha Inc."
            }
            }
            }
            

The form will process a data packet returned by the server that is similar to the following:

  
// sample success packet (batched requests)
            [
            {
            "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
            "result":{
            "success":true
            }
            }
            ]
            // sample failure packet (one request)
            {
            "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
            "result":{
            "errors":{
            "email":"already taken"
            },
            "success":false,
            "foo":"bar"
            }
            }
            

Also see the discussion in Ext.form.action.DirectLoad.

DirectSubmitConfig
DirectSubmitEvents
Load

A class which handles loading of data from a server into the Fields of an Ext.form.Basic.

Instances of this class are only created by a Form when loading.

Response Packet Criteria

A response packet must contain:

  • success property : Boolean
  • data property : Object

The data property contains the values of Fields to load. The individual value object for each Field is passed to the Field's setValue method.

JSON Packets

By default, response packets are assumed to be JSON, so for the following form load call:

  
var myFormPanel = new Ext.form.Panel({
            title: 'Client and routing info',
            renderTo: Ext.getBody(),
            defaults: {
            xtype: 'textfield'
            },
            items: [{
            fieldLabel: 'Client',
            name: 'clientName'
            }, {
            fieldLabel: 'Port of loading',
            name: 'portOfLoading'
            }, {
            fieldLabel: 'Port of discharge',
            name: 'portOfDischarge'
            }]
            });
            myFormPanel.getForm().load({
            url: '/getRoutingInfo.php',
            params: {
            consignmentRef: myConsignmentRef
            },
            failure: function(form, action) {
            Ext.Msg.alert("Load failed", action.result.errorMessage);
            }
            });
            

a success response packet may look like this:

  
{
            success: true,
            data: {
            clientName: "Fred. Olsen Lines",
            portOfLoading: "FXT",
            portOfDischarge: "OSL"
            }
            }
            

while a failure response packet may look like this:

  
{
            success: false,
            errorMessage: "Consignment reference not found"
            }
            

Other data may be placed into the response for processing the Form's callback or event handler methods. The object decoded from this JSON is available in the result property.

LoadConfig
LoadEvents
StandardSubmit

A class which handles submission of data from Forms using a standard <form> element submit. It does not handle the response from the submit.

If validation of the form fields fails, the Form's afterAction method will be called. Otherwise, afterAction will not be called.

Instances of this class are only created by a Form when submitting, when the form's Ext.form.Basic.standardSubmit config option is true.

StandardSubmitConfig
StandardSubmitEvents
Submit

A class which handles submission of data from Forms and processes the returned response.

Instances of this class are only created by a Form when submitting.

Response Packet Criteria

A response packet may contain:

  • success property : Boolean - required.

  • errors property : Object - optional, contains error messages for invalid fields.

JSON Packets

By default, response packets are assumed to be JSON, so a typical response packet may look like this:

  
{
            success: false,
            errors: {
            clientCode: "Client not found",
            portOfLoading: "This field must not be null"
            }
            }
            

Other data may be placed into the response for processing by the Ext.form.Basic's callback or event handler methods. The object decoded from this JSON is available in the result property.

Alternatively, if an errorReader is specified as an XmlReader:

  
errorReader: new Ext.data.reader.Xml({
            record : 'field',
            success: '@success'
            }, [
            'id', 'msg'
            ]
            )
            

then the results may be sent back in XML format:

  
<?xml version="1.0" encoding="UTF-8"?>
            <message success="false">
            <errors>
            <field>
            <id>clientCode</id>
            <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>
            </field>
            <field>
            <id>portOfLoading</id>
            <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>
            </field>
            </errors>
            </message>
            

Other elements may be placed into the response XML for processing by the Ext.form.Basic's callback or event handler methods. The XML document is available in the errorReader's xmlData property.

SubmitConfig
SubmitEvents
© Copyright 2005-2011 SharpKit. All rights reserved.