View Full Version : How to set margin of FormPanel

28 Feb 2013, 2:18 AM
HI ,

I am having simple code


var myForm = Ext.extend(Ext.FormPanel,

myItems : [
fieldLabel : 'First Name',
xtype : 'textfield',
name : 'FName',
allowBlank : false

initComponent: function(){
this.margins = 50;
this.title = 'Login Form';
this.items = this.getItems();
getItems : function(){
return this.myItems;

var f = new myForm();


When I set that margin , I am expecting that it will keep form panel away from browser window by 10 px from each side. Which is not happening . Please help me out .

28 Feb 2013, 3:21 AM

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses.

28 Feb 2013, 3:33 AM
Thanks willigogs for your reply . Actually I went through doc . But didn't understand fully . I am also new to ext js . That's why I posted here . Please tell me how can I set this kind of configuration .

28 Feb 2013, 3:37 AM
Basically the layout of the parent component needs to either be 'border', 'hbox', or 'vbox'.

Obviously in your situation you don't have a parent component - therefore you would either need to put your form in a container with one of these layout configs applied, or create a div on the page (styled with your required margin), which you then render your formpanel to.

28 Feb 2013, 4:19 AM
Hi ,

I have appended follwoing code

var f = new myForm();
var c = new Ext.Container(
margins : 10,
layout : 'border',
items : [f]


but till it is not working..

28 Feb 2013, 4:48 AM
Border layout requires its container to have a width and height afaik.

Therefore, try making it an hbox layout, then add the margins config to the formpanel, along with flex:1