Question:Create a student infomation form with the ExtJS library having the following fields:
1. *Name - textfield
2. Phone - textfiled
3. *Email - textfiled
4. *Sex - radio buttons
5. *Course- combobox
6. *Subject - checkbox
7. *DOB - datetime
8. Address - textarea
9. Comment - html editor
10. Save - button
11. Reset - button
All of the nessessary ExtJS library files shoud be included to be executed your code.
NB: ExtJS version number shoud be included in your answer sheet.
Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Student Information Form</title>
<link rel="stylesheet" type="text/css" href="ext-2.3.0/ext-2.3.0/resources/css/ext-all.css" />
<script src="ext-2.3.0/ext-2.3.0/adapter/ext/ext-base.js"></script>
<script src="ext-2.3.0/ext-2.3.0/ext-all-debug.js"></script>
</head>
<body>
<script>
var f=function(){
Ext.QuickTips.init();
var courses=new Ext.data.SimpleStore({
fields: ['id','coursename'],
autoload:true,
data:[['1','MBA'],['2','CIS'],['3','MIS'],['4','EEE']]
});
var my_form=new Ext.FormPanel({
url:"#",
renderTo:document.body,
frame:true,
title:'Student Information Form',
width:400,
items:[{xtype:'textfield', fieldLabel:'*Name', name:'txtName',vtype:'alpha'},
{xtype:'textfield', fieldLabel:'Phone', name:'txtPhone'},
{xtype:'textfield', fieldLabel:'*Email', name:'txtEmail',vtype:'email', allowBlank:false},
{xtype:'radio', fieldLabel:'*sex', name:'txtrdo', boxLabel:'Male'},
{xtype:'radio', name:'txtrdo', boxLabel:'Female', hideLabel:false,labelSeparator:''},
{xtype:'combo', fieldLabel:'Course', name:'cmbcourse', mode:'local',store:courses, displayField:'coursename',width:120},
{xtype:'checkbox', fieldLabel:'*Subject', boxLabel:'English', name:'subject'},
{xtype:'checkbox', boxLabel:'Mathematics', name:'subject' , hideLabel:false,labelSeparator:''},
{xtype:'checkbox', boxLabel:'Computing', name:'subject', hideLabel:false,labelSeparator:''},
{xtype:'datefield', fieldLabel:'DOB', name:'txtDate'},
{xtype:'textarea', fieldLabel:'address', name:'txtadd',anchor:'100%'},
{xtype:'htmleditor',fieldLabel:'Comments', height:100,anchor:'100%'},
],
buttons:[{
text: 'Save',
handler:function(){
my_form.getForm().submit();
}
},{
text: 'Reset',
hendler:function(){
my_form.getForm().reset();
}
}
]
});
}
Ext.onReady(f);
</script>
</body>
</html>