PDA

View Full Version : Login Form - centered on Panel



dolowoyo
14 Sep 2011, 5:49 PM
Sooo....I'm a Sencha noob. I am creating an app (using MVC) which will start off with a login page. I have a Main page which uses the card layout, and I've added the login page as the first item in the Main Panel. My login page is a form panel and it shows up all well and good. However, I will like to center the login form so it looks something like this.

28065

Here is what I have so far:

28066

APP.JS


var App = new Ext.Application({ name: 'MyApp',
icon: 'resources/images/PracticeChoice.png',
glossOnIcon: false,
tabletStartupScreen: 'resources/images/tablet_startup.png',
profiles: {
tabletPortrait: function() {
return Ext.is.Tablet && Ext.orientation == 'portrait';
},
tabletLandscape: function() {
return Ext.is.Tablet && Ext.orientation == 'landscape';
}
},


/**
* This function is automatically called when the document has finished loading. All we do here
* is launch the application by calling the main controller's 'login' action
*/
launch: function() {
Ext.dispatch({
controller: MyApp.controllers.mainController,
action: 'loginIndex'
});
}
});


MAINCONTROLLER.JS

Ext.regController('MainController', { 'loginIndex': function(options) {
if(!MyApp.views.mainView) {
MyApp.views.mainView = new MyApp.views.MainView();
}


MyApp.views.mainView.setActiveItem(MyApp.views.loginView);
},
'login': function(options) {
Ext.Msg.alert('Logged In!');
console.log('logging in');
}
});


MyApp.controllers.mainController = Ext.ControllerManager.get('MainController');


MAINVIEW.JS

MyApp.views.MainView = Ext.extend(Ext.Panel, { fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function () {


Ext.apply(MyApp.views, {
loginView: new MyApp.views.LoginView({ notesStore: MyApp.stores.mainStore })
});


this.dockedItems = this.buildDockedItems();


this.items = [MyApp.views.loginView]


MyApp.views.MainView.superclass.initComponent.call(this);


this.on('render', function () {
MyApp.stores.mainStore.load();
});
},
buildDockedItems : function() {
return [
this.buildTopDockToolbar()
];
},
buildTopDockToolbar : function() {
return {
xtype : 'toolbar',
dock : 'top',
title : 'My App ™'
};
}
});


LOGINVIEW.JS

MyApp.views.LoginView = Ext.extend(Ext.form.FormPanel, {

/**
* Here we just set up the login fields
*/
initComponent: function() {


this.loginButton = new Ext.Button({
text: 'Login',
ui: 'login',
handler: this.loginTap,
scope: this
});


this.bottomToolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
{xtype: 'spacer'},
this.loginButton,
{xtype: 'spacer'}
]
});


this.dockedItems = [this.bottomToolbar];


MyApp.views.LoginView.superclass.initComponent.call(this);
},


loginTap: function() {
Ext.dispatch({
controller: MyApp.controllers.mainController,
action: 'login'
});
},


items:[{
xtype: 'fieldset',
id: 'loginFormSet',
title: 'Login',
instructions: '',
defaults: {
//labelAlign: 'left'
labelWidth: '40%'
},
items: [{
xtype: 'textfield',
name: 'username',
label: 'UserName',
required: true
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
required: true
},
{
xtype: 'textfield',
name: 'orgid',
label: 'Organization ID',
required: true
}]
}]
});



Any help would be great. Thanks.

dolowoyo
15 Sep 2011, 8:21 AM
Thoughts, anyone?

Mthor
16 Sep 2011, 12:32 PM
make your form panel floating: true, and give it a width and height, you can also set the layout to

layout: Ext.is.Phone ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center
},

but if you want the login over the other panel it will need to float

dolowoyo
16 Sep 2011, 8:21 PM
Thanks Mthor. I was already able to get this working. It was along the lines of your suggestion though.

Sasha172
29 Feb 2012, 10:39 PM
Hi,
Can you tell me what you did to make it work exactly ?? Im in the same situation :)

Thanks
Sasha