PDA

View Full Version : Able to pass form components to Ext.form.BasicForm through a variable?



darren
4 Jun 2011, 1:42 PM
Hey all here is my form code I am attaching to a form that is created through markup:


var form = new Ext.form.BasicForm('register', {
standardSubmit: true
});
var username = new Ext.form.TextField({
allowBlank: false,
applyTo: 'username',
maxLength: 20,
minLength: 2
});
form.add(username);
var password = new Ext.form.TextField({
allowBlank: false,
applyTo: 'password',
minLength: 8,
vtype: 'alphanum'
});
form.add(password);
var email = new Ext.form.TextField({
allowBlank: false,
applyTo: 'email',
id: 'email',
minLength: 6,
maxLength: 255,
vtype: 'email'
});
form.add(email);
var first_name = new Ext.form.TextField({
allowBlank: false,
applyTo: 'first_name',
maxLength: 255
});
form.add(first_name);
var last_name = new Ext.form.TextField({
allowBlank: false,
applyTo: 'last_name',
maxLength: 255
});
form.add(last_name);
var zip_postal_code = new Ext.form.TextField({
allowBlank: false,
applyTo: 'zip_postal_code',
maxLength: 10
});
form.add(zip_postal_code);


I was trying to do:

var username = new Ext.form.TextField({
allowBlank: false,
applyTo: 'username',
maxLength: 20,
minLength: 2
});
var password = new Ext.form.TextField({
allowBlank: false,
applyTo: 'password',
minLength: 8,
vtype: 'alphanum'
});
var email = new Ext.form.TextField({
allowBlank: false,
applyTo: 'email',
id: 'email',
minLength: 6,
maxLength: 255,
vtype: 'email'
});
var first_name = new Ext.form.TextField({
allowBlank: false,
applyTo: 'first_name',
maxLength: 255
});
var last_name = new Ext.form.TextField({
allowBlank: false,
applyTo: 'last_name',
maxLength: 255
});
var zip_postal_code = new Ext.form.TextField({
allowBlank: false,
applyTo: 'zip_postal_code',
maxLength: 10
});
var form = new Ext.form.BasicForm('register', {
items: [username, password, email, first_name, last_name, zip_postal_code]
standardSubmit: true
});

but I cannot pass the variables to the items property. Is this possible with basicform instead of using the add method? Also does anyone know how I would target a DOM element for my error messages for each individual TextField component?

Thanks,
Darren

mitchellsimoens
4 Jun 2011, 3:40 PM
Don't want to use FormPanel to handle the items and then use BasicForm to submit?

darren
5 Jun 2011, 9:50 AM
If I used FormPanel I would lose my original markup and have to have the DOM generate it... in this case I want to avoid that.

mitchellsimoens
5 Jun 2011, 9:53 AM
Understandable... Then use Ext.Ajax.request() and set the params. Look at the configs you can set on the request method. BasicForm actually uses Ajax.request under the hood.