PDA

View Full Version : Defining a FormPanel



alfa19
10 Jan 2014, 3:12 AM
Hi all,

i need to define a very stupid formPanel:


Ext.define('MyApp.view.Login', {
extend: 'Ext.form.Panel',
alias: 'widget.login',

url: '/login/',
frame: true,
buttonAlign: 'left',
title:'Login Form',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
fieldDefaults: {
xtype: 'textfield',
labelWidth:80
},
items:[{
fieldLabel: 'Username',
name:'username',
allowBlank:false
}, {
fieldLabel: 'Password',
name:'password',
allowBlank:false
}]
});

me.callParent(arguments);
}
});

This is what i see:

47534

The application Viewport has a border layout. The region 'center' is a Panel with layout fit with only one item: the form panel described above.

Thanks for your help.

scottmartin
10 Jan 2014, 5:38 AM
Please see the following:



Ext.define('MyApp.view.Login', {
extend: 'Ext.form.Panel',
alias: 'widget.login',

url: '/login/',
//frame: true,
buttonAlign: 'left',
title: 'Login Form',

bodyPadding: 5,
layout: 'anchor',

defaults: { // set form defaults
xtype: 'textfield',
labelWidth: 80,
anchor: '100%'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank: false
}, {
fieldLabel: 'Password',
name: 'password',
allowBlank: false
}]
});

me.callParent(arguments);
}
});

Ext.application({
name: 'Fiddle',

launch: function() {
Ext.create('MyApp.view.Login', {
renderTo: Ext.getBody()
});
}
});