all the examples that I find show the forms up against the left edge of the webpage.
can someone lead me in the right direction as to how to center the form on a page.
I used the method of CSS centering at http://bluerobot.com/web/css/center1.html (http://bluerobot.com/web/css/center1.html) The form centered but All my drop down menus have the text centered.
Here is my code:
html
<cfsetting showDebugOutput="No">
<!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>Registration Form</title>
<style type="text/css">
<!--
.style1 {
font-size: xx-small
}
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
background-color:#eee;
}
-->
</style>
</head>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<!-- GC -->
<link rel="stylesheet" type="text/css" href="../resources/css/xtheme-aero.css" />
<!-- LIBS -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script src="../ext-all-debug.js"></script>
<script type="text/javascript" src="combo.js"></script>
<script src="registration.js"></script>
<link rel="stylesheet" type="text/css" href="../examples/form/forms.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
</head>
<body>
<div id="Content" style="width:600px;">
<div align="justify" class="style1"><p>While filling out the form you will see the fields turn red. This is not necessarily a problem with your entry. Some of the fields are checked character by character so if it hasn't yet met the requirements it will show red.</p> When you see a <img src="http://wwwdev/KenStevens/ext-1.1/resources/images/default/form/exclamation.gif" alt=" red exclamation" /> (red exclamation image) next to a field place your mouse over the image and it will explain what is needed for that field.</div>
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">WVDEP Online Registration Form</h3>
<div id="form-ct" >
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</body>
</html>
Here is the js code:
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
// add vtype for Phone
Ext.form.VTypes["phoneVal"] = /^((\d{3}[-])|(\(\d{3}\)[ ]?))(\d{3}[-])(\d{4})$/;
Ext.form.VTypes["phoneMask"] = /[() \d-]/;
Ext.form.VTypes["phoneText"] = 'Not a valid phone number. Must be in the format (304) 123-4567 or (304)123-4567 or 304-123-4567';
Ext.form.VTypes["phone"]=function(v){
return Ext.form.VTypes["phoneVal"].test(v);
};
Ext.form.VTypes["commaVal"] = /^[\$]?((\d{1,3},){1,2})?(\d{1,3})?(\.[\d]{2})?$/;
Ext.form.VTypes["commaMask"] = /[\d.,$]/;
Ext.form.VTypes["commaText"] = 'Not a valid number. Max: $999,999,999.99 examples: 999,999 999.23 $9.45 (Dollar Sign is optional) ';
Ext.form.VTypes["comma"]=function(v){
return Ext.form.VTypes["commaVal"].test(v);
};
//Ext.form.VTypes["webVal"] = /^(http[s]?:\/\/)?(www\.)?([a-zA-Z0-9-\.])+\.(com|org|net|mil|edu|ca|co.uk|com.au|gov)$/;
Ext.form.VTypes["webVal"] = /^(([A-VX-Z])|(W(?!WW)))+$/;
Ext.form.VTypes["webMask"] = /[a-zA-Z0-9/:\d.,$]/;
Ext.form.VTypes["webText"] = 'Not a valid url. example: http://www.wvdep.org, (http:// or https:// are optional)';
Ext.form.VTypes["web"]=function(v){
return Ext.form.VTypes["webVal"].test(v);
};
/*
* ================ registration form =======================
*/
var registration = new Ext.form.Form({
labelWidth: 275 // label settings here cascade unless overridden
//url:'save-form.cfm'
});
registration.fieldset(
{legend:'Attendee Information'},
new Ext.form.TextField({
fieldLabel: 'Organization Name',
name: 'org_name',
width:175,
maxLength:50,
allowBlank:false
}),
new Ext.form.Checkbox({
fieldLabel: 'If your organization does not operate in West Virginia check here',
name: 'in_wv',
linkedField:"idOfLinkedField",
listeners:{
change:function(field, value){
//alert(value);
var linkedField = Ext.ComponentMgr.get(field.linkedField);
linkedField.allowBlank = value===false||value=="false";
linkedField.clearInvalid();
}
}
}),
new Ext.form.TextField({
fieldLabel: 'If not from West Virginia where?',
labelSeparator: '',
name: 'other_state',
width:175,
maxLength:39,
id:"idOfLinkedField"
}),
new Ext.form.ComboBox({
fieldLabel: 'Title',
hiddenName:'contact_title',
store: new Ext.data.SimpleStore({
fields: ['id', 'title'],
data : Ext.combodata.contact_title // from combo.js
}),
displayField:'title',
valueField: 'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:190,
maxLength:10
}),
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
maxLength:25,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Middle Initial',
name: 'Middle',
width:175,
maxLength:1,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175,
maxLength:25,
allowBlank:false
})
);
registration.fieldset(
{legend:'Mailing Address'},
new Ext.form.TextField({
fieldLabel: 'Address',
name: 'addr1',
width:175,
maxLength:39,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'City',
name: 'city',
width:175,
maxLength:39,
allowBlank:false
}),
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.combodata.states // from combo.js
}),
displayField:'state',
valueField: 'abbr',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
value: 'WV',
width:190,
editable:false
}),
new Ext.form.NumberField({
fieldLabel: 'Zip',
name: 'zipcode',
width:175,
allowDecimals:false,
allowNegative:false,
maxLength:5,
minLength:5,
allowBlank:false
}),
new Ext.form.ComboBox({
fieldLabel: 'County',
hiddenName:'county',
store: new Ext.data.SimpleStore({
fields: ['id', 'county'],
data : Ext.combodata.county // from combo.js
}),
emptyText:'Make a Selection...',
displayField:'county',
valueField: 'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:190,
allowBlank:false,
editable:false
})
);
registration.fieldset(
{legend:'physical Address'},
new Ext.form.Checkbox({
fieldLabel: 'Same as Mailing Address',
name: 'physical_same',
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Address',
name: 'physical_addr1',
width:175,
maxLength:39
}),
new Ext.form.TextField({
fieldLabel: 'City',
name: 'physical_city',
width:175,
maxLength:39
}),
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'physical_state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.combodata.states // from combo.js
}),
displayField:'state',
valueField: 'abbr',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
value: 'WV',
selectOnFocus:true,
width:190,
editable:false
}),
new Ext.form.NumberField({
fieldLabel: 'Zip',
name: 'physical_zipcode',
width:175,
allowDecimals:false,
allowNegative:false,
maxLength:5,
minLength:5
}),
new Ext.form.ComboBox({
fieldLabel: 'County',
hiddenName:'physical_county',
store: new Ext.data.SimpleStore({
fields: ['id', 'county'],
data : Ext.combodata.county // from combo.js
}),
emptyText:'Make a Selection...',
displayField:'county',
valueField: 'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:190,
editable:false
})
);
registration.fieldset(
{legend:'Contact Information'},
new Ext.form.TextField({
fieldLabel: 'Primary Phone',
name: 'phone_no',
vtype:'phone',
allowBlank:false,
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Facsimile',
name: 'fax_no',
vtype:'phone',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Cellular Phone',
name: 'cell_no',
vtype:'phone',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'E-Mail Address',
name: 'email_address',
vtype:'email',
width:175,
maxLength:50,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'URL/Web Address',
name: 'web_url',
vtype:'web',
width:175,
maxLength:75
})
);
registration.fieldset(
{legend:'Additional Information'},
new Ext.form.NumberField({
fieldLabel: 'Average Number Employees (last 3 yrs)',
name: 'avg_no_employees',
width:175,
allowDecimals:false,
allowNegative:false,
maxLength:4
}),
new Ext.form.TextField({
fieldLabel: 'Average Yearly Gross Sales (last 3 yrs) ',
name: 'avg_sales_amount',
width:175,
maxLength:16,
vtype:'comma'
}),
new Ext.form.DateField({
fieldLabel: 'Date Business Establised',
name: 'date_established',
width:190
}),
new Ext.form.TextArea({
fieldLabel: 'List the types of services you might want to receive from us',
name: 'service_query',
grow: true,
preventScrollbars:true,
width:190,
maxLength:250
}),
new Ext.form.TextArea({
fieldLabel: 'How did you hear about us?',
labelSeparator: '',
name: 'hear_about',
grow: true,
preventScrollbars:true,
width:190,
maxLength:100
})
);
registration.addButton('Save', function(){
if (registration.isValid()) {
var frmRegister = document.getElementById(registration.id);
frmRegister.method = 'POST';
frmRegister.action = 'save-form.cfm';
frmRegister.submit();
} else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
});
registration.addButton('Cancel');
registration.render('form-ct');
});