PDA

View Full Version : Center a Single FormPanel in Center of Webpage



theparakeet
7 Apr 2011, 11:56 PM
I'm sure this is a rookie question, but I have a single form panel as shown below. All I want to do is center this on the page, hopefully with CSS or some other Ext function call. I've tried binding it to a div with the following css configured:

survey {
margin-left:auto;
margin-right:auto;
}

however, that doesn't work. I basically would like to do something to the effect of what float:right does, however centering it. Am I missing a CSS class for ExtJS I should be using? Here is the example form:


var form = new Ext.FormPanel({
frame:true,
width:700,
defaultType: 'textfield',
title: "Screen In",


tbar: {
xtype: 'toolbar',
items: [{
icon: "/media/images/back-button-desktop.png",
handler: backButtonFunction,
scale:"large",
},{xtype:'tbfill'},{
icon: "/media/images/next-button-desktop.png",
type: 'submit',
handler: nextButtonFunction,
scale: "large"
}]
},

items: [


{
xtype: "fieldset",
cls: "fieldSet",
title: "Including your iPhone, how many cell phones do you own for making and receiving calls?",
name: "1",
width: 680,
layout: 'anchor',
items: [{
xtype: "combo",
name: "NUMCELL",
hiddenName: 'iphoneId',
hiddenValue: 0,
width:300,
valueField: 'key',
displayField: 'display',
triggerAction: 'all',
value: "1",
forceSelection: true,
allowBlank: true,
autoSelect: true,
store: [
["1","I do not own an iPhone"],["2","1"],["3","2"],["4","3"],["5","4"],["6","5"],["7","6"],["8","7"],["9","8"],["10","9"],["11","10"],["12","11"],["13","12"],["14","13"],["15","14"],["16","15"]
]
}]
}
]
});

Any help would be appreciated, as I feel I've tried everything.

theparakeet
8 Apr 2011, 12:40 AM
This is rather easy and can't believe I didn't realize it. Simply add this to the configuration of the form

layout:"margin: 0px auto 0px auto;"