PDA

View Full Version : FormPanel and xtype



A387
16 Oct 2011, 6:28 AM
Dear forumusers,

I've been struggling with creating a really simple form, but I simply can't get it working!

This is my code:

var form = new Ext.form.FormPanel({
scroll: 'vertical',
title: 'Reageer',
iconCls: 'compose',
items: [
{
xtype: 'fieldset',
defaults: {
labelAlign: 'left'
},
items: [
{
xtype: 'textfield',
name : 'naam',
label: 'Naam',
},
{
xtype: 'textarea',
name : 'naam',
label: 'Naam',
}
]
}
]}
);
tabpanel.add(form);

The problem occurs when I try to add the xtype: 'textarea'. When I just duplicate the textfield it works, but if I change it into a texterea, it fails.

Any ideas what I do wrong?

skirtle
16 Oct 2011, 7:27 AM
Are you getting an error? What exactly does happen when 'it fails'? I don't see any obvious reason why this wouldn't work.

Which ExtJS version are you using?

Which browsers have you tested (make sure you've tried multiple)?

You've got some stray commas after your labels but that shouldn't hurt. You've also used the same name for both fields. The lack of any configured layouts makes me wonder if the textarea is being rendered but isn't visible.

Use Firebug or similar to inspect the elements on the page and see whether or not the textarea is there but hidden off the end of the fieldset.

A387
16 Oct 2011, 11:31 AM
Ok, I was still running the emulator :) didn't get much debug information, haha, except for the console.log messages. I copied the www folder into a virtual host and ran it again. Then I saw an 'access-control-allow-origin' error from Chrome. Then I created a JSON file and put that also in my localhost folder.

Now I see the error, which is: attempting to create a component with an xtype that has not been registered: textarea.

I haven't seen anything about this in the manual, do I overlook something?

skirtle
16 Oct 2011, 2:47 PM
Are you using the dynamic loader? Have you added a requires for textarea?

netemp
16 Oct 2011, 10:45 PM
Now I see the error, which is: attempting to create a component with an xtype that has not been registered: textarea.

I haven't seen anything about this in the manual, do I overlook something?

The xtype for textarea is textareafield, so use xtype: 'textareafield'. Hope this helps.

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

A387
16 Oct 2011, 11:47 PM
Are you kidding me, haha! Netemp you are right! The xtype indeed is 'textareafield'.

Thanks!

netemp
17 Oct 2011, 12:02 AM
Are you kidding me, haha! Netemp you are right! The xtype indeed is 'textareafield'.

Thanks!

Glad could help :)

skirtle
17 Oct 2011, 3:09 AM
I'm glad your problem is solved but I don't understand why that worked. According to the docs both textarea and textareafield are valid xtypes for a textarea. I've just tried it myself using both 4.0.2 and 4.0.6 and they both work fine.

I'd be fascinated to know why that fixed it.

A387
17 Oct 2011, 3:18 AM
I don't have a clue. It simply doesn't work when I remove 'field'. Maybe it interfers with other JS files?

<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/sencha-touch.js"></script>
<script type="text/javascript" charset="utf-8" src="js/test.js"></script>

<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-DEFE-****"></script>

skirtle
17 Oct 2011, 3:34 AM
Well that goes some way to explain why I can't reproduce the problem. This forum is for ExtJS 4, not Sencha Touch. Please post Touch questions in the Touch forum.

A387
17 Oct 2011, 3:56 AM
:"> Ah.. eyeopener...