PDA

View Full Version : How to define a form within a window?



ragecf
6 Dec 2012, 5:38 AM
Dear all, I'm trying upgrade my code from Ext3 to Ext4.
But I can't organise the code pretty and clearly.

For example, I want to upgrade my login window.
In Ext3:


winLoginForm = function(){
//define form buttons
var buttons = [
{text:'Login', handler:this.onLogin, scope:this},
{text:'Reset', handler:this.onReset, scope:this}
];

//define hot key - enter
var key = {key:13, handler:this.onLogin, scope:this};

//define login form
this.form = new Ext.FormPanel({
id:'login-form',
title:'Login',

..........

items:[
{
fieldLabel:'Employee No',
name:'username',
xtype:'textfield',
allowBlank:false
}, {
fieldLabel:'Password',
name:'password',
xtype:'textfield',
inputType:'password',
allowBlank:false
}
],
buttons:buttons,
keys:key
});

winLoginForm.superclass.constructor.call(this, {
id:'login-win',
width:280,

.........

items:this.form,
listeners:{
show:this.onReset
} //how to write this listeners in Ext4?
});
};

Ext.extend(winLoginForm, Ext.Window, {
onLogin: function(){
..............
//handle login here
},
onReset: function(){
.............
//Clear user name and password textfield here
}
});


I tried the code in Ext4, but not satisfied.


Ext.define('MyApp.view.loginWin', {
extend: 'Ext.window.Window',

id: 'login-win',

......

initComponent: function() {
//define form hot keys - Enter & Esc
var keys = {
keypress: function(t, e) {
if(e.getKey() === 13) {
this.onLogin();
}else if(e.getKey() === 27) {
this.onReset();
}
},
scope: this
}

//define login form
var loginForm = Ext.create('Ext.form.Panel', {
id: 'login-form',
title: 'Login',

..................

items: [
{
fieldLabel: 'Employee No',
name: 'username',
xtype: 'textfield',
allowBlank: false,
enableKeyEvents: true,
listeners: keys
}, {
fieldLabel: 'Password',
name: 'password',
xtype: 'textfield',
inputType: 'password',
allowBlank: false,
enableKeyEvents: true,
listeners: keys
}
],
buttons: [
{text: 'Login', handler: this.onLogin, scope: this},
{text: 'Reset', handler: this.onReset, scope: this}
]
});

this.items = loginForm;

this.callParent();
},

onLogin: function() {
Ext.Msg.alert('tt', 'ttt');
},
onReset: function() {
Ext.Msg.alert('xx', 'xxx');
}
}



Now I don't know how to write the listeners to call the onReset function when winLogin show().

Did I wrote this Ext.define professionally? Show me the example or improvement, thanks a lot.

mitchellsimoens
8 Dec 2012, 6:32 AM
That's fine how you did it.