static forms + ext form intelligence? (BasicForm maybe)

[lkasdorf]

Is there a way to create a form in standard html markup and still use the Ext validation? I have created a rather complex form that is generated in js, and now some clients are saying that they get no form being rendered. Perhaps javascript is turned off, I don't know yet.

I was thinking that if I built the form using standard markup, yet could still benefit from Ext, that would be ideal.

The docs for BasicForm make a vague reference to this - but I cannot find any examples.

Thanks!

Lynn Kasdorf

[Animal]

I transform HTML forms into Ext BasicForms.

You still need to create Ext Fields by transforming existing inpot fields.

[steffenk]

Hi Animal,

do you do that for each field or do you use any iteration method ?

[Animal]

Every field has it's Ext-style markup written to the page.

Every field also contributes a small fragment of Javascript to activate that markup to a page controller which collects the scripts together and outputs them in one <script> tag.

So what gets output is quite large.

My page might simply contain stuff that looks like:



<aspicio:select entity="<%=person%>" property="dateOrder"/>


And it would write the defined label for that property (in the local language), a <select> element with 3 <option> tags, for "DMY", "MDY" and "YMD", and a script to transform that into a ComboBox.

It's all about having intelligent classes on the server side which encapsulate the knowledge that you have about building Ext pages, so that you can declaratively request these classes to produce complex pages.

Our JSP pages are really tiny. But what gets sent to the browser is quite large.

[lkasdorf]

I thought maybe there was a built-in way for ext to deal with static forms. Sounds like there is not. Thanks for the info, tho.

But the real reason for my original posting is- how would it be possible for the form not to render? The complainant is using Safari on a Mac. And at one point in dev cycle (using firefox) I saw what I think she is seeing- the page would fail to render the form at all. No errors or msgs- just no form. I restarted Firefox and it worked fine. But I'm used to Firefox getting into a snit and I have to restart.



Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//if (!regisForm)
delete(regisForm);
buildRegisForm();
regisForm.render("regisFormDiv");

});

var regisForm;

function buildRegisForm()
{
regisForm = new Ext.form.Form({
. . .
add lots of fields and combo boxes using fieldsets and 2 columns
}




In the onReady I decided to always delete the old form and rebuild rather than test for its existance, thinking that this may be more reliable?

So- what could cause a form not to render? Div hidden (it is not), Javascript disabled (it is not).

I really don't feel like tearing this app apart and rebuilding the old, boring way (but reliable) way :-|

[Animal]

Of course there is a way to wrap static forms. BasicForm lightly wraps an existing DOM form.

So I can output



<form class="x-form " name="AspicioForm1189753491437" id="AspicioForm1189753491437" method="POST">
<input type="hidden" name="formEntityType" value="Language" />
<input type="hidden" name="id" value="null" />
<input type="hidden" name="version" value="null" />
<fieldset class="x-form-fieldset x-form-label-left ">
<legend>Primary data</legend>
<div class="x-form-item">
<label style="width:100px" for="AspicioForm1189753491437FilterField0">Code</label>
<div class="x-form-element asp-form-element">
<input name="code" id="AspicioForm1189753491437FilterField0" class="x-form-text " style="text-transform:uppercase;" size="3" maxlength="3">
<button type="button" tabindex="-1" class="asp-drill-button" id="AspicioForm1189753491437FilterField0FindButton">Find</button>
</div>
</div>
<div class="x-form-item">
<label style="width:100px" for="AspicioForm1189753491437TextField1">Name</label>
<div class="x-form-element asp-form-element"><input name="name" id="AspicioForm1189753491437TextField1" class="x-form-text " size="50" maxlength="50"></div>
</div>
</fieldset>
</form>


from my server, and activate it with the generated script:



// First, create an Array of Ext Fields, each of which wraps an existing input field.
// The function which returns the Field instance is generated:
var fields=[
function(){
var b=Ext.get('AspicioForm1189753491437FilterField0FindButton');
var f=new Ext.form.TextField({
id:'AspicioForm1189753491437FilterField0',
name:'code',
helpKey:'Language.code',
forceUpperCase:true,
allowBlank:false,
validatorMask:/[A-Za-z0-9]{1,10}/,
value:''}
).applyTo('AspicioForm1189753491437FilterField0');
b.on('click', function(){cp.supercomponent.searchOnFieldValue('AspicioForm1189753491437FilterField0');})
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({
id:'AspicioForm1189753491437TextField1',
name:'name',
helpKey:'Language.name',
allowBlank:false,
validatorMask:/[A-Za-z0-9 ]{1,50}/
, value:''
}).applyTo('AspicioForm1189753491437TextField1');
f.on({});
return f;}()];

// Create the Ext.form.BasicForm from the existing form element:
this.domForm=Ext.getDom('AspicioForm1189753491437');
this.form=new Ext.form.BasicForm(this.domForm,{
id:'AspicioForm1189753491437',
method:'POST'
});

// Add that Field Array to the form
this.form.add.apply(this.form, fields);

// Done!