PDA

View Full Version : Few problems with Ext.form.Panel



nmcbride
4 Mar 2012, 3:30 PM
I made a simple logon form. However I am having a few simple issues. Here is the code:


Ext.onReady(function(){


Ext.define('Logmeon.view.ui.LogonForm', {
extend: 'Ext.form.Panel',

height: 100,
width: 400,
bodyPadding: 10,
standardSubmit: true,
url: '/logon',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
name: 'logon',
fieldLabel: 'Username',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'textfield',
inputType: 'password',
name: 'password',
fieldLabel: 'Password',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'hiddenfield',
name: 'came_from',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'hiddenfield',
name: 'do.logon',
fieldLabel: 'Label',
anchor: '100%'
}
],
dockedItems: [
{
xtype: 'toolbar',
id: 'LogonFormToolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill',
id: 'LogonFormToolbarFill'
},
{
xtype: 'button',
text: 'Logon',
formBind: true,
disabled: true,
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
});

me.callParent(arguments);
},

onButtonClick: function(button, e, options) {
var form = this.getForm();
if (form.isValid()) {
form.submit();
}
}

});

Ext.create('Logmeon.view.ui.LogonForm', {
renderTo: "logonform"
});


});


The problems I am having are the following:
I can not get the form to perform a standard submit. Even with the setting set to true, it is still performing an ajax submission.
With the url set the way I have above, it is not recognized when I perform the post. The post is posted to null. The only way I can get it to recognize the url is to set it like .submit({'url':'/logon'}).
Am I missing something from my code? Thank you everyone.

Nate

skirtle
4 Mar 2012, 7:41 PM
I think you're running into problems because you're specifying options for a BasicForm on a FormPanel. Take a look at the section about BasicForm here:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel

The key section is the bit about subclassing FormPanel. The initialConfig stuff is a bit of a hack but unfortunately it's necessary for now.

nmcbride
4 Mar 2012, 7:52 PM
Well it says:

Although not listed as configuration options of FormPanel, the FormPanel class accepts all of the config options supported by the Ext.form.Basic (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic) class, and will pass them along to the internal BasicForm when it is created.

So I would assume it would pass them. Plus that is where the designer put them so I would also assume it knows where they should go?

But also even if I do .submit({'standardSubmit':true, 'url':'/logon'}), the url works but the standardSubmit isn't being honored.

For example right now my button click event is the following:


onButtonClick: function(button, e, options) {
var form = this.getForm();
if (form.isValid()) {
form.submit({standardSubmit:true, url:'/logon'});
}
}


But it is still performing an ajax request.

nmcbride
4 Mar 2012, 9:27 PM
It took me a moment but I finally understand what you were saying. I had to put:


Ext.apply(me.initialConfig, {
standardSubmit: true
});

into the initComponent function.

Also standardSubmit isn't even an option of submit so I don't know why I thought that would work.

Thank you.