PDA

View Full Version : How to Generate Form Like This



pravin_bluebird
31 Jul 2007, 10:09 PM
Hello Guys,

I have attached one image of form.
I want to generate similar form with Ext.

But the problem is that when i add form items it takes in the next line.
and i cant put the form items as per the requirements.
Alignment and spacing is also the major issue.

Any idea How to resolve this Problem.


Any help will be greatly appreciated...

Regards
Pravin

pravin_bluebird
31 Jul 2007, 10:57 PM
I got one solution for the designing

this is my code forms.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="forms.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css" />

</head>
<body>
<div id="empForm">
<form id="simple" class="x-form">
<div id="mainEmp" style="width:80%;">
<!--Left Emp Start Here -->
<div id="leftEmp" style="float:left; width:45%;">
<fieldset>
<legend>Employee Information</legend>
<div class="form-item">
<div class="form-label">Title:</div>
<div >
<input type="text" size="30" name="text-title" id="text-title" />
</div>
</div>
<div class="form-item">
<div class="form-label">Initial:</div>
<div >
<input type="text" size="30" name="initial" id="initial" />
</div>
</div>
<div class="form-item">
<div class="form-label">First Name</div>
<div >
<input type="text" size="30" name="first-name" id="first-name" />
</div>
</div>
<div class="form-item">
<div class="form-label">Middle Name:</div>
<div >
<input type="text" size="30" name="middle-name" id="middle-name" />
</div>
</div>
<div class="form-item">
<div class="form-label">Last Name:</div>
<div >
<input type="text" size="30" name="last-name" id="last-name" />
</div>
</div>

<div class="form-item">
<div class="form-label">Gender:</div>
<div >
<select name="gender" id="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>


<div class="form-item">
<div class="form-label">Date Of Birth:</div>
<div>
<input type="text" size="10" value="" name="date-of-birth" id="date-of-birth" />
</div>
</div>

<div class="form-item">
<div class="form-label">Birth Place:</div>
<div >
<input type="text" size="30" name="birth-palce" id="birth-place" />
</div>
</div>

<div class="form-item">
<div class="form-label">Nationality:</div>
<div >
<input type="text" size="30" name="nationality" id="nationality" />
</div>
</div>

<div class="form-item">
<div class="form-label">Marital status:</div>
<div >
<select name="mstatus" id="mstatus">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
</div>

<div class="form-item">
<div class="form-label">Blood Group:</div>
<div >
<select name="bgroup" id="bgroup">
<option value="-O">-O</option>
<option value="+O">+O</option>
<option value="-A">-A</option>
<option value="+A">+A</option>
<option value="-B">-B</option>
<option value="+B">+B</option>
<option value="-AB">-AB</option>
<option value="+AB">+AB</option>

</select>
</div>
</div>

<div class="form-item">
<div class="form-label">Personal Reg No:</div>
<div >
<input type="text" size="30" name="prno" id="prno" />
</div>
</div>
</fieldset>


<fieldset>
<legend>Department Information</legend>
<div class="form-item">
<div class="form-label">Dept. Name:</div>
<div >
<input type="text" size="30" name="deptname" id="deptname" />
</div>
</div>
<div class="form-item">
<div class="form-label">From:</div>
<div>
<input type="text" size="10" value="" name="fromDate" id="fromDate" />
</div>
</div>
<div class="form-item">
<div class="form-label">To:</div>
<div>
<input type="text" size="10" value="" name="toDate" id="toDate" />
</div>
</div>

</fieldset>
</div>
<!--Left Emp End Here -->
<!--Right Emp Start Here -->
<div id="rightEmp" style="padding-left:46%;width:46%;">
<fieldset>
<legend>Address Information</legend>
<div class="form-item">
<div class="form-label">Address:</div>
<div >
<textarea name="address" id="address" cols="25" rows="3"></textarea>
</div>
</div>
<div class="form-item">
<div class="form-label">City:</div>
<div >
<input type="text" size="30" name="city" id="city" />
</div>
</div>
<div class="form-item">
<div class="form-label">State:</div>
<div >
<input type="text" size="30" name="state" id="state" />
</div>
</div>
<div class="form-item">
<div class="form-label">Postal code:</div>
<div >
<input type="text" size="30" name="pcode" id="pcode" />
</div>
</div>
<div class="form-item">
<div class="form-label">Country:</div>
<div >
<input type="text" size="30" name="country" id="country" />
</div>
</div>
<div class="form-item">
<div class="form-label">Home Phone:</div>
<div >
<input type="text" size="30" name="homephone" id="homephone" />
</div>
</div>
<div class="form-item">
<div class="form-label">Mobile Phone:</div>
<div >
<input type="text" size="30" name="mphone" id="mphone" />
</div>
</div>
<div class="form-item">
<div class="form-label">E-mail:</div>
<div >
<input type="text" size="30" name="e-mail" id="e-mail" />
</div>
</div>
</fieldset>


<fieldset>
<legend>Login Information</legend>
<div class="form-item">
<div class="form-label">Username:</div>
<div >
<input type="text" size="30" name="username" id="username" />
</div>
</div>
<div class="form-item">
<div class="form-label">Password:</div>
<div >
<input type="text" size="30" name="password" id="password" />
</div>
</div>

</fieldset>
</div>
<!--Right Emp End Here -->



<!--Left Emp End Here -->
<!--Right Emp Start Here -->

</div>

</form>
</div>
</body>
</html>



and

forms.js



/*
* Ext JS Library 1.1 Beta 2
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){
Ext.QuickTips.init();

// Ext.MessageBox.alert("Warning", "This example is not done and results may vary.");

// Change field to default to validation message "under" instead of tooltips
//Ext.form.Field.prototype.msgTarget = 'under';


var text_title = new Ext.form.TextField({
allowBlank:false,
vtype:'alpha'
});
text_title.applyTo('text-title');

var initial = new Ext.form.TextField({
allowBlank:false
});
initial.applyTo('initial');

var first_name = new Ext.form.TextField({
allowBlank:false
});
first_name.applyTo('first-name');

var middle_name = new Ext.form.TextField({
allowBlank:false
});
middle_name.applyTo('middle-name');

var last_name = new Ext.form.TextField({
allowBlank:false
});
last_name.applyTo('last-name');


var gender = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'gender',
width:60,
forceSelection:true
});

var date_of_birth = new Ext.form.DateField({
allowBlank:false,
width:80
});

date_of_birth.applyTo('date-of-birth');


var birth_place = new Ext.form.TextField({
allowBlank:false
});
birth_place.applyTo('birth-place');

var nationality = new Ext.form.TextField({
allowBlank:false
});
nationality.applyTo('nationality');

var mstatus = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'mstatus',
width:80,
forceSelection:true
});

var bgroup = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'bgroup',
width:80,
forceSelection:true
});

var prno = new Ext.form.TextField({
allowBlank:false
});
prno.applyTo('prno');


var deptname = new Ext.form.TextField({
allowBlank:false
});
deptname.applyTo('deptname');


var fromDate = new Ext.form.DateField({
allowBlank:false,
width:80
});

fromDate.applyTo('fromDate');

var toDate = new Ext.form.DateField({
allowBlank:false,
width:80
});

toDate.applyTo('toDate');


var address = new Ext.form.TextArea({
width:180, grow:false
});
address.applyTo('address');

var city = new Ext.form.TextField({
allowBlank:false
});
city.applyTo('city');

var state = new Ext.form.TextField({
allowBlank:false
});
state.applyTo('state');

var pcode = new Ext.form.TextField({
allowBlank:false
});
pcode.applyTo('pcode');


var country = new Ext.form.TextField({
allowBlank:false
});
country.applyTo('country');

var homephone = new Ext.form.TextField({
allowBlank:false
});
homephone.applyTo('homephone');

var mphone = new Ext.form.TextField({
allowBlank:false
});
mphone.applyTo('mphone');

var email = new Ext.form.TextField({
allowBlank:false
});
email.applyTo('e-mail');


var username = new Ext.form.TextField({
allowBlank:false
});
username.applyTo('username');

var password = new Ext.form.TextField({
allowBlank:false
});
password.applyTo('password');

});

this type of example is given in Extjs Examples simple form


But now i am confuse about how to work with event handling.......



Regards Pravin