PDA

View Full Version : Formpanel in a Window - how can I avoid this?



frieder
29 Nov 2007, 10:57 AM
I have created a small login form - it works perfectly as plain FormPanel. But I need a modal "real" window. Changing 'FormPanel' to 'Window' did what I want from the visual apparence, but I can not longer access the form in the handler (as this is defined in FormPanel, not in Panel).

So I wrote a "dummy" window and used the FormPanel as component. Now the functionality is back, but the appearance has changed - there is a window around.

Any suggestion to get both functionality and beauty ?

Ext.onReady(function(){
Ext.QuickTips.init();
doIt()
});

doIt = function (){

var win = new Ext.Window({
layout:'fit',
modal: true,
width:350,
height:300,
shadow: true,
closeAction:'hide',
plain: true,
bodyBorder: false,
layout: 'form',
border: false
});

var status = {html: 'not set<br/>', id: 'status'};

var simple = new Ext.FormPanel({
labelWidth: 75,
method: 'GET',
frame:true,
title: 'Login',
bodyStyle:'padding:5px 5px 0',
width: 350,
layout: 'form',
defaults: {width: 230},

items: [
{
xtype: 'hidden',
name: 'cmd',
value: 'auth'
},{
xtype: 'textfield',
fieldLabel: 'Login Name',
name: 'username',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'Password',
name: 'password',
inputType: 'password'
},
status
],
buttons: [{
text: 'Save',
type: 'submit',
name: 'send',
disabled: false,
handler: function(){
simple.form.submit({
url: 'http://localhost/lpserver/user',
waitMsg:'.. please wait',
success: function(form, action) {doAction(form, action, true)},
failure: function(form, action) {doAction(form, action, false)}
})
}
}]
});

win.add(simple);
win.show();
doAction = function(form, action, success){
alert('something happened')
}
}

santosh.rajan
29 Nov 2007, 11:04 AM
Why do you want Ext on a login page? dont you think it is over kill? You can use Ext after the user logs in. Your server will end up pumping Ext to every one landing on that page, even if he logs in or not.

hendricd
29 Nov 2007, 11:07 AM
win.add(simple);
win.doLayout();

thaiat
29 Nov 2007, 11:59 AM
you may want to try this :


doIt = function (){


var status = {html: 'not set<br/>', id: 'status'};

var simple = new Ext.FormPanel({
labelWidth: 75,
method: 'GET',
frame:true,
bodyStyle:'padding:5px 5px 5px 5px;',
autoHeight:true,
baseCls : 'x-plain',
layout: 'form',
defaults: {width: 230},
items: [
{
xtype: 'hidden',
name: 'cmd',
value: 'auth'
},{
xtype: 'textfield',
fieldLabel: 'Login Name',
name: 'username',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'Password',
name: 'password',
inputType: 'password'
},
status
],
buttons: [{
text: 'Save',
type: 'submit',
name: 'send',
disabled: false,
handler: function(){
simple.form.submit({
url: 'http://localhost/lpserver/user',
waitMsg:'.. please wait',
success: function(form, action) {doAction(form, action, true)},
failure: function(form, action) {doAction(form, action, false)}
})
}
}]
});

var win = new Ext.Window({
modal: true,
width:350,
height:150,
shadow: true,
closeAction:'hide',
plain: true,
title:'Login',
bodyBorder: false,
border: false,
items : [simple]
});



win.show();
doAction = function(form, action, success){
alert('something happened')
}
}

frieder
30 Nov 2007, 2:11 AM
So the solution was to move the title from the form to the window - simple, but efficient :)
btw, I used the "login" only as example (to keep the application short)