PDA

View Full Version : How to set margin of FormPanel



newusername
28 Feb 2013, 2:18 AM
HI ,

I am having simple code


Ext.onReady(function()
{

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();
myForm.superclass.initComponent.call(this);
console.log(this);
},
getItems : function(){
return this.myItems;
}

});
var f = new myForm();
f.render(document.body);


});


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 .

willigogs
28 Feb 2013, 3:21 AM
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.FormPanel-cfg-margins


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.

newusername
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 .

willigogs
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.

newusername
28 Feb 2013, 4:19 AM
Hi ,

I have appended follwoing code



var f = new myForm();
//f.render(document.body);
var c = new Ext.Container(
{
margins : 10,
layout : 'border',
items : [f]
});

c.render(document.body);


but till it is not working..

willigogs
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