PDA

View Full Version : this.up("form").getForm().getEl is not a function



christophercheng
27 Dec 2011, 6:49 AM
I am trying to use "standardSubmit" with form, but it seems that "formPanel.getForm().getEl()" could not be found in ExtJS 4.0.7. Am I missing something?




Ext.define('GlAccountTrialBalanceReportForm',{
extend: 'Ext.form.Panel',
alias: 'widget.glAccountTrialBalanceReportForm',
url: '/report/glAccountTrialBalanceReport!generate.action',
layout: {
type: 'vbox',
align: 'stretch'
},
border: true,
bodyPadding: 10,
standardSubmit: true,
defaults: {
xtype: 'textfield',
margins: '0 0 0 0'
},
items: [
{
xtype:'datefield',
fieldLabel: 'From Date',
editable: true,
emptyText: '',
name: 'fromDate',
format: 'd/m/Y',
allowBlank: false
},
{
xtype:'datefield',
fieldLabel: 'To Date',
editable: true,
emptyText: '',
name: 'toDate',
format: 'd/m/Y',
allowBlank: false
}
],
buttons: [
{
text: 'Generate',
handler: function() {
this.up('form').getForm().getEl().dom.url = '/report/glAccountTrialBalanceReport!generate.action';
this.up('form').getForm().getEl().dom.method = 'POST';
if (this.up('form').getForm().isValid()) {
this.up('form').getForm().submit();
}
}
}
]
});

mitchellsimoens
27 Dec 2011, 7:39 AM
this.up('form') will resolve to the Ext.form.Panel which has an element. getForm() will return the Ext.form.Basic instance which does not have an element, it handles the loading/submitting of the form basically.

Also, I would only do one this.up('form') call and assign it a variable if you are going to use it more than once. You don't need to do it several times, it's just wasteful.

christophercheng
27 Dec 2011, 5:20 PM
I've read this article (I know it's legacy), basic.getForm().getEl().dom.action is valid
http://www.sencha.com/learn/legacy/Manual:Forms:BasicForm:standardSubmit (http://www.sencha.com/learn/legacy/Manual:Forms:BasicForm:standardSubmit)

So what's the modern way of doing it in extjs4?

mitchellsimoens
28 Dec 2011, 5:34 AM
All you are wanting to do is pass in a url and method right? I'm assuming you can't do that when you create the form but you can pass those in the submit function.

christophercheng
28 Dec 2011, 9:44 AM
This is not working either, it doesn't work like a standard submit


this.up('form').getForm().submit({
standardSubmit: true,
url: '/report/glAccountTrialBalanceReport!generate.action'
}
);

mitchellsimoens
28 Dec 2011, 9:49 AM
standardSubmit is not a valid option of submit(). It is of the form

christophercheng
28 Dec 2011, 5:25 PM
ok, then how do I do standardSubmit in Extjs4?

tavinashb
29 Dec 2011, 6:07 AM
Try this,



buttons: [
{
text: 'Generate',
scope: this,
handler: function() {
var form = this.getForm();
form.url = '/report/glAccountTrialBalanceReport!generate.action';
form.method = 'POST';
if (form.isValid()) {
form.submit();
}
}
}
]

christophercheng
30 Dec 2011, 6:45 PM
"this" is a button, so this.getForm() will not work

tavinashb
30 Dec 2011, 9:21 PM
In this case "this" is referring to form not to button as we are using "scope: this".

Troy Wolf
5 Apr 2013, 7:44 AM
Old thread, but I sit here today facing same issue. I have Ext3 based code that does what I show in this jsFiddle.
http://jsfiddle.net/troywolf/PNcvq/

It creates a form (that actually has no UI) then submits it using a standard submit to a popup window. It works.

The same code in Ext4 fails because apparently the form does not have a getEl(). You can test this in my jsFiddle by changing the Ext library using the drop down in the left panel.

What's a guy to do? ~o)

Troy Wolf
5 Apr 2013, 10:43 AM
Old thread, but I sit here today facing same issue. I have Ext3 based code that does what I show in this jsFiddle.
http://jsfiddle.net/troywolf/PNcvq/

It creates a form (that actually has no UI) then submits it using a standard submit to a popup window. It works.

The same code in Ext4 fails because apparently the form does not have a getEl(). You can test this in my jsFiddle by changing the Ext library using the drop down in the left panel.

What's a guy to do? ~o)

OK...so you can send a StandardSubmit (http://docs-devel.sencha.com/ext-js/4-2/#!/api/Ext.form.action.StandardSubmit) config object in your submit. The jsFiddle below shows a working Ext 4.2 solution. Note that it will attempt to pop a window to demonstrate the technique--your browser will probably block that.

http://jsfiddle.net/troywolf/4ZFYC/

It definitely was not clear to me in the documentation how to use a StandardSubmit object. Thanks to a coworker who dug into the Ext source to figure this out for me. I'll try to add a comment to the docs....I'm always hesitant to do that for fear of passing on bad info.

Troy Wolf
26 Apr 2013, 12:24 PM
I've read this article (I know it's legacy), basic.getForm().getEl().dom.action is valid
http://www.sencha.com/learn/legacy/Manual:Forms:BasicForm:standardSubmit (http://www.sencha.com/learn/legacy/Manual:Forms:BasicForm:standardSubmit)

So what's the modern way of doing it in extjs4?

I don't believe christophercheng's question has been answered. I have exactly the same question. The scenario is a rather obscure one I suppose. It's the situation where you want to submit a form to a new or different window than the window containing the form. Like the OP, I've used the standardSubmit technique in Ext3 where you change the form's action by manipulating the form's DOM. Here is my Ext4 translation....that does not work:



var f = Ext.create('Ext.form.Panel', {
renderTo: 'my-form',
url: '/some-url-that-will-process-this-form/',
method: 'POST',
standardSubmit: true,
baseParams: {
id: 13,
favoriteColor: 'green'
}
});

// In Ext3, if I wanted to submit this form to a different window,
// I could set the form's action to the name of my window
// (or iframe in this case.). However, this does not work in Ext4:
f.getForm().getEl().dom.action = 'my-iframe-name';
f.submit();


That worked in Ext3, but Ext4's form does not have a getEl() method. The form panel does, but the DOM returned is not the actual form of course. Here is a jsbin to play with (http://jsbin.com/evacet/2/edit).