Problem using Ext.Direct with extended forms [Archive]

TonySteele

19 Mar 2010, 6:56 AM

I am trying to use Ext.Direct to submit form that has been extended.

In the following example the form guestbookform created on the fly works fine, the server method is called with the form parameters.
However the extended FormPanel, when created guestbookform2 and submitted results in a normal submit to the HTML page, the Ext.Direct api is not recognised.

Does anybody know why this is not working ?

Ext.Direct.addProvider(Ext.app.REMOTING_API);

guestbookForm2 = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
Ext.apply(this, {
api: {
submit: Guestbook.addEntry
},
id: 'aricle_form',
fileUpload: true,
border: false,
height: 250,
bodyStyle: 'padding: 15px;',
items: [{
xtype: 'textfield',
name: 'firstName',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name'
}, {
xtype: 'textarea',
name: 'message',
width: 300,
fieldLabel: 'Message'
}],
buttons: [{
text: 'Submit',
handler: function() {
this.form.submit();
},
scope: this
}]
});
guestbookForm2.superclass.initComponent.call(this, arguments);
}
});

Ext.onReady(function() {
Ext.QuickTips.init();
var guestbookform2 = new guestbookForm2();
var guestbookform = new Ext.form.FormPanel({
api: {
submit: Guestbook.addEntry
},

fileUpload: true,
border: false,
height: 250,
bodyStyle: 'padding: 15px;',
items: [{
xtype: 'textfield',
name: 'firstName',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name'
},{
xtype: 'textarea',
name: 'message',
width: 300,
fieldLabel: 'Message'
}],
buttons: [{
text: 'Submit',
handler: function() {
guestbookform.getForm().submit();
}
}]
});

var panel = new Ext.Panel({
title: 'Leave a Message',
items: [
guestbookform
]
});

panel.render(document.body);

});

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Editor Grid/Writer Example</title>

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="../ext/ux/css/fileuploadfield.css" />
<style>
.item-over
{
background-color : Aqua;
}
</style>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all.js"></script>

<script type="text/javascript" src="../directProxy.ashx"></script>

<script type="text/javascript" src="Guestbook.js"></script>


<link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../../shared/icons/silk.css" />
</head>
<body>

</body>
</html>

steffenk

23 Mar 2010, 3:51 AM

i had simular problems and applied the api later

onRender: function() {
TYPO3.EM.EmTools.superclass.onRender.apply(this, arguments);
Ext.apply(this.getForm(),{
api: {
submit: TYPO3.EM.ExtDirect.uploadExtension
},
paramsAsHash: false
});
}

TonySteele

23 Mar 2010, 5:28 AM

Thanks I'll give that a try, I was starting to think it had something to do with rendering.

This would appear to be a bug.

TonySteele

24 Mar 2010, 5:33 AM

Thanks again, that worked

Wolfgang

1 Apr 2010, 2:09 AM

It is not a bug - it is the concept of lazy loading.
This is not specific to Ext.Direct but applies also to eventhandler and the like.

When you extend ("guestbook2") you need to realize that initComponent does not create the object - this happens only when the object renders. This is the concept of lazyloading.
So anything that actually requires the object to exist should be done in "render" or "afterrender" (depends on what to put there).