PDA

View Full Version : Layout problem



newusername
1 Jun 2013, 7:40 AM
Hi ,

I am very much new to Ext js . I am creating a simple login form and playing with layouts.
Simply I have created a login form with anchor layout as I wanted to be resize when I resize browser. So it is working fine. But my other requirement is , that login form should be on right side . Now if I specify marginLeft to style property , it doesn't render it properly. What should I do if I want that Login Box to be on right side and should be resized when I resizes browser

following is the code :



Ext.ns('ME');
Ext.onReady(function() {


var loginForm = Ext.extend(Ext.FormPanel, {


id : 'loginForm',
initComponent : function() {
this.title = 'Please login'
this.items = this.getPageItems();
this.padding = 30
//this.width = '50%'
//this.height = 100
this.buttons = this.getButtons();
this.bodyBorder = false
this.labelAlign = 'right'
this.anchor = '100% 100%'


loginForm.superclass.initComponent.call(this);
},
getPageItems : function() {
var items = [];
var userNameField = new Ext.form.TextField({
name : 'userName',
fieldLabel : 'User Name'
,anchor : '60% 6%'
});


var passwordField = new Ext.form.TextField({
name : 'testname',
fieldLabel : 'Password',
inputType : 'password'
,anchor : '60% 6%'
});





items.push(userNameField);
items.push(passwordField);
return items;
}
,getButtons : function(){
var buttons = [];

var submitBtn = new Ext.Button({
text : 'Submit'
})

var resetBtn = new Ext.Button({
text : 'Reset'
})

buttons.push(submitBtn);
buttons.push(resetBtn);

return buttons;

}


});



var formContainer = new Ext.Panel({
layout : 'anchor'
,anchor : '100% 100%'
,items : [ new loginForm()]
});

var emptyContainer = new Ext.Panel({

})



new Ext.Viewport({
layout:'anchor'
,items : [formContainer]
});



});

mitchellsimoens
4 Jun 2013, 4:45 AM
First thing I see is you are overnesting. There is no reason to have a panel within the viewport. Remove that nesting and instead of anchor layout use fit layout.