Learn ExtJS Forum

So, We’ve gone through the basic setup of ExtJS. Now it’s the time to study something new.

Everyone says to study Containers, GridPanel and TabPanel in this phase. However if you have jQuery and PHP background, I’d prefer to start with Forms in ExtJS

The API is described at Sencha website

Setup the basic structure of ExtJS in a file forms.html and make sure that it is accessible at http://localhost/extjs/form.html

How to create a simple form รขโ‚ฌโ€œ first example.

[code]
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
frame: true,
title: ‘Tell me about yourself’,
width: 200,
items: [{
xtype: ‘textfield’,
fieldLabel: ‘Your name’,
name: ‘name’
}, {
xtype: ‘numberfield’,
fieldLabel: ‘Age’,
name: ‘age’
}]
});
[/code]

Explanation
————

This is quite self explanatory. We have inserted two text fields “name” and “age”. ExtJS supports a special text field called “numberfield” in which you will be able to input only numbers. So we set age’s type as “numberfield”

renderTo: The renderTo option tells the framework to render the form into the body of the html file.
Ext.getBody() is an inbuilt function in ExtJS that will return the body tag

Now, we add two buttons , Submit and Reset

[code]
buttons: [{
text: ‘Save’,
handler: function()
{
form.getForm().submit({
url: ‘submit.php’,
waitMsg: ‘Processing Request’,
success: function(a, response)
{
Ext.Msg.alert(“Login Success”, response.result.reason);
},
failure: function(a, response)
{
Ext.Msg.alert(“Failed”, response.result.reason);

}
});
}

}, {

text: ‘Reset’,
handler: function()
{
form.getForm().reset();
}
}]
});
[/code]

Explanation
—————

Here we have inserted two buttons. “Submit” and “Reset” and attached two handlers to the click event. When the user click on the Submit button, the data will be sent to the file “submit.js” and will wait for the result. At the same time it will show a message “Processing Request” which was given in waitMsg.

ExtJS expects JSON as returned string from “submit.php” and if the string contains “success:true” then it will execute the codes described in the success() function, else failure(). The response from submit.php is stored in “response” object.

Now, take a look at the “submit.php” code

[code]

[/code]

Clearly, if name is not posted, then it will return false with the error message. If the name is given, then it will return success with a welcome message.

So combined code will be

[code]

Ext.onReady(function(){

Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
frame: true,
title: ‘Tell me about yourself’,
width: 200,

items: [{
xtype: ‘textfield’,
fieldLabel: ‘Your name’,
name: ‘name’
}, {
xtype: ‘numberfield’,
fieldLabel: ‘Age’,
name: ‘age’
},
{
xtype: ‘radio’,
fieldLabel: ‘Sex’,
name: ‘sex’,
boxLabel: ‘male’

}, {
xtype: ‘radio’,
name: ‘sex’,
hideLabel: false,
boxLabel: ‘female’
}
],
buttons: [{

text: ‘Save’,
handler: function()
{
form.getForm().submit({
url: ‘submit.php’,
waitMsg: ‘Processing Request’,
success: function(a, response)
{
Ext.Msg.alert(“Login Success”, response.result.reason);
},
failure: function(a, b)
{
Ext.Msg.alert(“Failed”, response.result.reason);

}
});
}

}, {

text: ‘Reset’,
handler: function()
{
form.getForm().reset();
}
}]
});

});

[/code]

The array response.result contains the json string decoded as array, so it is easy to get the value of “reason” by response.result.reason.

Stay tuned for the next tutorial.

2 thoughts on “Learn ExtJS Forum

  1. Hi Vivek,

    You have done a good job.I am new to extjs, I tried to learn it from sencha docs but didn’t got much help.
    Everything given there is not for beginners, it is for someone experienced.
    You have consolidated the tutorial in a very good way.

    Thanks for that….. ๐Ÿ™‚

Leave a Reply

Your email address will not be published.