Ext-JS Help1111

S

SRJ

Disciple
Hi , I wan to bring my form in center...
i have the following code

Ext.onReady(function()
{

Ext.QuickTips.init();
var reg_form = new Ext.FormPanel({

url: 'movie-form-submit.php',
renderTo: document.body,
frame: true,
title: 'Employee Registration Form',
bodystyle:'padding:10px',
width:420,
height:420,

items: [
{

xtype: 'numberfield',
fieldLabel: 'Employee Id',
name: 'id',
allowBlank: false
},
{

xtype: 'textfield',
fieldLabel: 'Employee Name',
name: 'name',
listeners: {

invalid: function(field, msg)

{

Ext.Msg.alert('Invalid name !!', msg);

}

}
},
{
xtype: 'textfield',
fieldLabel: 'Email Id',
name: 'id',
allowBlank: false,
vtype :'email'
},


{
xtype: 'datefield',
fieldLabel: 'Date of Training',
name: 'doj',
disabledDays: [0]

},


{
xtype: 'checkbox',
name: 'siblings',
fieldLabel: 'Above 3.x'

},

{
xtype: 'timefield',
name: 'time',
fieldLabel: 'Time',
anchor: '90%'


},
{

xtype: 'radio',
fieldLabel: 'location',
name: 'location',
boxLabel: 'Nal Stop'

}, {

xtype: 'radio',
name: 'location',
hideLabel: false,
boxLabel: 'Hinjewadi'

},{
xtype: 'radio',
name: 'location',
hideLabel: false,
boxLabel: 'Blue Ridge'

},

{

xtype: 'textarea',
name: 'area',
fieldLabel: 'Requirement Details',
anchor: '80%',
multiline: true
},



]

});

});
PLease tell me what to add more to bring it in center?? i m testing it on IE8.0
 
Can you please attach your complete .htm (or .php) file, or put it between [ CODE] [/ CODE] tags? Also, please provide a link to the Ext JS library (especially the right version) that you are using.
 
Add the following in your bodystyle:

Code: 
position: absolute;left:50%;top:50%;margin:-210px 0 0 -210px;

Your JS file should then look like this:

Code: 
url: 'movie-form-submit.php',

renderTo: document.body,

frame: true,

title: 'Employee Registration Form',

bodystyle:'padding:10px;position: absolute;left:50%;top:50%;margin:-210px 0 0 -210px;',

width:420,

height:420,

Basically this body style will force your element's top left corner to render at 50% top and 50% left of the page. The margin I have given are half of your height & width, which will then make the center of the page same as your elements.
 
Back
Top