Provides Ext.Direct support for loading form data.
This example illustrates usage of Ext.Direct to load a form through Ext.Direct.
var myFormPanel = new Ext.form.FormPanel({
// 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":"[email protected]"
}
}
}
]
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.
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.urlEncode.
var fp = new Ext.form.FormPanel({
...
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.Ext.form.action.Action.CONNECT_FAILURE) {
Ext.Msg.alert('Error',
'Status:'+action.response.status+': '+
action.response.statusText);
}
if (action.failureType === Ext.form.action.Action.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();
}
}]
Get the reference to the current class from which this object was instantiated. Unlike Ext.Base.statics,
this.self
is scope-dependent and it's meant to be used for dynamic inheritance. See Ext.Base.statics
for a detailed comparison
Ext.define('My.Cat', {
statics: {
speciciesName: 'Cat' // My.Cat.speciciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciciesName); / dependent on 'this'
return this;
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciciesName: 'Snow Leopard' // My.SnowLeopard.speciciesName = 'Snow Leopard'
}
});
var kitty = new My.Cat(); // alerts 'Cat'
var katty = new My.SnowLeopard(); // alerts 'Snow Leopard'
var cutie = katty.clone();
alert(Ext.getClassName(cutie)); // alerts 'My.SnowLeopard'
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
Call the overridden superclass' method. For example:
Ext.define('My.own.A', {
constructor: function(test) {
alert(test);
}
});
Ext.define('My.own.B', {
constructor: function(test) {
alert(test);
this.callParent([test + 1]);
}
});
var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
The arguments, either an array or the arguments
object
from the current method, for example: this.callParent(arguments)
Get the reference to the class from which this object was instantiated. Note that unlike Ext.Base.self,
this.statics()
is scope-independent and it always returns the class from which it was called, regardless of what
this
points to during runtime
Ext.define('My.Cat', {
statics: {
speciciesName: 'Cat' // My.Cat.speciciesName = 'Cat'
},
constructor: function() {
alert(this.statics().speciciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciciesName
alert(this.self.speciciesName); // dependent on 'this'
return this;
},
clone: function() {
var cloned = new this.self; // dependent on 'this'
cloned.groupName = this.statics().speciciesName; // equivalent to: My.Cat.speciciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
statics: {
speciciesName: 'Snow Leopard' // My.SnowLeopard.speciciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var kitty = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var katty = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var cutie = kitty.clone();
alert(Ext.getClassName(cutie)); // alerts 'My.SnowLeopard'
alert(cutie.groupName); // alerts 'Cat'