Form submit thinks my fields are empty when they are not

[parky128]

Hi,

I am battling a very odd issue where I have a basic login window with a form and a few fields on, one of which is hidden.


Ext.define('PPExtranet.view.ui.LoginWindow', {
extend: 'Ext.window.Window',


draggable: false,
width: 400,
resizable: false,
closable: false,
title: 'Login',
modal: true,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'form',
itemId: 'loginform',
bodyPadding: 10,
url: '/session/BeginSession.json',
items: [
{
xtype: 'hiddenfield',
name: 'appID',
value: 45,
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
name: 'loginname',
fieldLabel: 'User Name',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'textfield',
inputType: 'password',
name: 'password',
fieldLabel: 'Password',
allowBlank: false,
anchor: '100%'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
itemId: 'btnLogin',
text: 'Login'
}
]
}
]
});


me.callParent(arguments);
}


});


The hidden field has a value set, and its only this value which gets posted through to the url configured on the form. If I enter text into the login and password text fields these get ignored and all that gets posted through for these are empty strings!

Here is my controller code which I have hooked up to the login button click event:


if (this.getLoginForm().getForm().isValid()) {
this.getLoginForm().getForm().submit({
success: function(form, action) {
Ext.Msg.alert('Success', Ext.encode(action.result.data));
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.message);
}

});
} else {
Ext.Msg.alert('Validation Error', 'Validation error');
}


The isValid call on the form is coming back as false even though my fields have values entered. If I break into my code and inspect the fields and their values, both are empty strings even through I have text entered into these on the screen.

This is completely stumping me, any suggestions?

[parky128]

Ok, I'm even more confused now, I have lifted my login window UI code and am now creating it explicitly in the launch function from my application code and it works just fine, field values are being correctly submitted:


Ext.Loader.setConfig({
enabled: true
});


Ext.application({
models: [
'Customer',
'CustomerDetail',
'User',
'MobileDevice',
'Session'
],


stores: [
'CustomerDetailStore',
'UsersStore',
'MobileDevicesStore',
'CustomersStore',
'SessionStore'
],


views: [
'MainViewport',
'LoginWindow',
'CustomerGrid',
'CustomerDetailsForm',
'UsersGrid',
'UnitsGrid'
],


name: 'PPExtranet',


controllers: [
'Login',
'Customer'
],


launch: function() {
var vp = Ext.create('PPExtranet.view.MainViewport');


var form = Ext.widget('form', {
url: '/session/BeginSession.json',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
margins: '0 0 10 0'
},


items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Enter your login details:',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',


fieldDefaults: {
labelAlign: 'top'
},
items: [{
flex: 1,
name: 'loginname',
fieldLabel: 'First',
allowBlank: false
}]
}, {
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'hiddenfield',
name: 'appID',
fieldLabel: 'appID',
allowBlank: false,
value: '1'
}


],


buttons: [{
text: 'Login',
handler: function() {
if (this.up('form').getForm().isValid()) {
// In a real application, this would submit the form to the configured url
this.up('form').getForm().submit({
success: function(form, action) {
Ext.Msg.alert('Success', Ext.encode(action.result.data));
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.message);
}
});
this.up('window').hide();
}
}
},{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
this.up('window').hide();
}
}]
});


loginWindow = Ext.widget('window', {
title: 'Login',
closeAction: 'hide',
width: 300,
height: 300,
minHeight: 300,
layout: 'fit',
resizable: false,
modal: true,
items: form
});

loginWindow.show();


}
});




So for some reason its not liking my filed values if I'm creating the window\login form from a separate view.

Strange! Any thoughts out there?

[aconran]

Very odd.

Any chance you can re-create a smaller project that you'd be willing to share that illustrates the problem?