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

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 {

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({
defaultType: 'textfield',
title: "Screen In",

tbar: {
xtype: 'toolbar',
items: [{
icon: "/media/images/back-button-desktop.png",
handler: backButtonFunction,
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,
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.

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;"