PDA

View Full Version : Can i render or applyTo into a standard html form



caultonpos
6 Aug 2009, 9:16 PM
I tried to do this inside the script tags
Ext.onReady(function(){
Ext.QuickTips.init();
var date50000485 = new Ext.form.TextField({ fieldLabel: Weight:',
applyTo: 'text50000485'});
});

with the main html

<body>
<form id='xxx' name = 'xxx' action="/patientos/SubmitClinicalForm.do" method="POST">
<input type="text" name="value(text50000485)",id="text50000485"/>
<input type="submit"/></form>
</body>

but I get an error ' this.el is null ' on the render line below

applyToMarkup : function(el){
this.allowDomMove = false;
this.el = Ext.get(el);
this.render(this.el.dom.parentNode);
},

so I need to change the HTML markup? I tried wrapping a div but no luck.

Animal
6 Aug 2009, 9:27 PM
HTML? ,id= ?

caultonpos
6 Aug 2009, 9:33 PM
I thought the applyTo finds the form element by ID (on the input) so I dont have an enclosing div (which I did try once). Here is a full example snipped in a few places:

<html>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
var bd = Ext.getBody();

var username50000607 = new Ext.form.TextField({ fieldLabel: 'Username:', applyTo: 'username50000607'});
var password50000603 = new Ext.form.TextField({ fieldLabel: 'Password:',inputType: 'password', applyTo: 'password50000603'});
});
</script>
</head>

<body>
<form id='xxx' name = 'xxx' action="/patientos/SubmitClinicalForm.do" method="POST">
<table>
<tr><td>Username:</td><td><div id="username50000607"><input type="text" name="value(username50000607)",id="username50000607"/></div></td></tr>

<tr><td>Password:</td><td><input type="password" name="value(password50000603)",id="password50000603"/></td></tr>
<tr><td><input type="hidden" name="value(targetFormTypeRefId))" id="login50000602" value="50001218"/></td></tr>
</table>
<input type="hidden" name="value(formTypeRefId)" value="50001209"/><input type="submit"/>
</form>
</body>

</html>

Animal
6 Aug 2009, 9:35 PM
That seems a tortured way of creating a form.

Sending an HTML "picture" of your app down, and then going through it field by field, converting it into an Ext form!

Why not just create an Ext Form containing Ext Fields? Much easier!

Animal
6 Aug 2009, 9:37 PM
So. Is Firebug telling you of any errors when code in your page runs?

Or, how else are you going to see errors thrown by code in your page?

caultonpos
6 Aug 2009, 9:38 PM
I am all for replacing the torture with mild pain.

Originally I was using a FormPanel but it was too restrictive. I'll email you offline and see if I can get some consulting help from you.

caultonpos
6 Aug 2009, 9:58 PM
Firefox Tools-->Error Console tells me

this.el is null ext-all-debug.js line 14590

and my form fields are not transformed into the ext fancy ones. I think. I am tired now.
If I can just generate the HTML that is for a standard form I would be happy

Condor
6 Aug 2009, 11:52 PM
I see 2 problems:

<div id="username50000607">
<input type="text" name="value(username50000607)",id="username50000607"/>
</div>

1. The div can't have the same id as the input.
2. What is that comma (...",id="...) doing there?

caultonpos
7 Aug 2009, 3:44 AM
=D> Yay I didnt realize Animal was pointing to the ,id doh

Sweeeeet that works awesome, all the nice controls with a regular form.

ext rocks.