Hierarchy
Ext.BaseExt.form.action.ActionExt.form.action.SubmitExt.form.action.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.
Determines whether a Form's fields are validated in a final call to isValid prior to submission. Pass false in the Form's submit options to prevent this. Defaults to true.
The function to call when a failure packet was received, or when an error ocurred in the Ajax communication. The function is passed the following parameters:
Extra headers to be sent in the AJAX request for submit and load actions. See Ext.data.Connection.headers.
Extra headers to be sent in the AJAX request for submit and load actions. See Ext.data.Connection.headers.
The HTTP method to use to access the requested URL. Defaults to the BasicForm's method, or 'POST' if not specified.
The HTTP method to use to access the requested URL. Defaults to the BasicForm's method, or 'POST' if not specified.
Extra parameter values to pass. These are added to the Form's Ext.form.Basic.baseParams and passed to the specified URL along with the Form's input fields.
Parameters are encoded as standard HTTP parameters using Ext.Object.toQueryString.
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
The scope in which to call the configured success and failure callback functions (the this reference for the callback functions).
If set to true, the emptyText value will be sent with the form when it is submitted. Defaults to true.
If set to true, the emptyText value will be sent with the form when it is submitted. Defaults to true.
The function to call when a valid success return packet is received. The function is passed the following parameters:
The number of seconds to wait for a server response before failing with the failureType as Ext.form.action.Action.CONNECT_FAILURE. If not specified, defaults to the configured timeout of the form.
The message to be displayed by a call to Ext.window.MessageBox.wait during the time the action is being processed.
The message to be displayed by a call to Ext.window.MessageBox.wait during the time the action is being processed.
The title to be displayed by a call to Ext.window.MessageBox.wait during the time the action is being processed.
The title to be displayed by a call to Ext.window.MessageBox.wait during the time the action is being processed.
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side validation is performed unless Ext.form.action.Submit.clientValidation is explicitly set to false.
Failure type returned when a communication error happens when attempting to send a request to the remote server. The response may be examined to provide further information.
Failure type returned when the response's success property is set to false, or no field values are returned in the response's data property.
Add / override static properties of this class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$' steve.printMoney(); // alerts '$$$$$$$'
Create a new instance of this Class. Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
The type of failure detected will be one of these: Ext.form.action.Action.CLIENT_INVALID, Ext.form.action.Action.SERVER_INVALID, Ext.form.action.Action.CONNECT_FAILURE, or Ext.form.action.Action.LOAD_FAILURE. Usage:
var fp = new Ext.form.Panel({
...
buttons: [{
text: 'Save',
formBind: true,
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'form-submit.php',
waitMsg: 'Submitting your data...',
success: function(form, action){
// server responded with success = true
var result = action.result;
},
failure: function(form, action){
if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
Ext.Msg.alert('Error',
'Status:'+action.response.status+': '+
action.response.statusText);
}
if (action.failureType === Ext.form.action.Action.SERVER_INVALID){
// server responded with success = false
Ext.Msg.alert('Invalid', action.result.errormsg);
}
}
});
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Override prototype members of this class. Overridden methods can be invoked via Ext.Base.callOverridden
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
The raw XMLHttpRequest object used to perform the action.
The raw XMLHttpRequest object used to perform the action.
The decoded response object containing a boolean success property and other, action-specific properties.
The decoded response object containing a boolean success property and other, action-specific properties.
Invokes this action using the current configuration.
Invokes this action using the current configuration.
Call the original method that was previously overridden with Ext.Base.override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
The arguments, either an array or the arguments
object
Returns the result after calling the overridden method
Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className