PDA

View Full Version : Ext.ux.MultiField v0.1



bpjohnson
15 Apr 2008, 12:43 PM
I recently needed a way for users to add the same set of information to a form multiple times, and our users find the editor grid to be less than entirely intuitive. Hence Ext.ux.MultiField. It works like a FieldSet that contains other FieldSets (called instances) that are populated with form fields based on an initial set of definitions.

Values are submitted the PHP-ish array way. If your multifield is called "multiField" and your instances have fields called "firstname" and "lastname", you would get the following values posted:

multiField[0][firstname]
multiField[0][lastname]
multiField[1][firstname]
multiField[1][lastname]
etc...

As of right now, you cannot nest the instance fields inside anything (such as columns or other fieldsets).

Config options of interest:
initialInstances: The number of fieldsets to add by default. (If there are more initialValues, this is ignored.)
maxInstances: Zero means infinite, otherwise limit the number of instances.
instanceDefs: FieldSet configuration options that are applied to each instance.
fieldDefs: an array of field definitions to add to each instance.
initialValues: an array of value objects to populate the initial instances with. They correlate to field names in the fieldDefs.
maxInstancesText: tooltip text for when max instances are reached.
buttonText: tooltip text for the add instance buttonI've included example js/html files, just drop them (along with Ext.ux.MultiField.js) in your ext/examples/form directory.

Example:

var form = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
method: 'POST',
id: 'simpleForm1',
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
width: 325,
xtype: 'multifield',
id: 'multiFieldTest1',
initialInstances: 1, //The number of fieldsets to add by default. (If there are more initialValues, this is ignored.)
maxInstances: 0, // Zero means infinite, otherwise limit the number of instances.
formID: 'simpleForm1',
name: 'multiFieldTest',
title: 'User Information',
maxInstancesText: 'You may not add any more users.',
buttonText: 'Click to add another user.'
//instanceDefs are FieldSet configuration options that are applied to each instance.
instanceDefs: {
title: 'User Data',
autoHeight:true,
defaultType: 'textfield',
collapsed: false,
width: 300,
labelWidth: 75,
defaults: {width: 195},
},
//fieldDefs is an array of field definitions to add to each instance.
fieldDefs: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Default'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Value'
}],
//initialValues is a set of values to populate with. They correlate to field names in the fieldDefs.
initialValues: [{
first: 'Wormy',
last: 'McTavish'
},{
first: 'John',
last: 'Doe'
}]
}

],

buttons: [{
text: 'Save',
type: 'submit',
handler: function() {
Ext.getCmp('simpleForm1').getForm().submit();
}


},{
text: 'Cancel'
}]
});