Just like on the server, you can either use the Model Form framework or implement your own custom form page.

Creating an Extensible Model Form Page

The Model Form framework allows pages to be extensible through its layout strategy. You can create an instance of ModelFormStrategy to be used within your Model Form page, and then dependent modules can add fields and functionality to that ModelFormStrategy instance. Here's an example:

define(function(){
 
MODA.OrgFormStrategy = new One.model.ModelFormStrategy({
 
	buildLayout: function(fields) {
		var tabs = this.getComponents('TABS', fields);
		var extraFields = this.getComponents('FIELDS', fields);
 
		var items = [
			fields.get('Name'),
			fields.get('Enterprise')
		].concat(extraFields);
 
		if(tabs.length > 0) {
			items = items.concat({
				xtype: 'tabpanel',
				activeTab: 0,
				deferredRender: false,
				items: tabs
			});
		}
 
		return {
			xtype: 'form',
			items: items
		};
	}
});
});

A function this.getComponents is used to fetch components under a given key. In the example above, two keys have been defined: 'TABS' and 'FIELDS'. As we'll see in the next section, dependent modules can add components under these keys so they can be fetched inside buildLayout and displayed in the model form page.

Because the keys for fetching components are defined by you, they should be documented so that dependent modules know how they can add components to your page. As seen in the example above, you can allow extra fields, tabs, or any other components anywhere in the page you want.

Extending a Model Form Page

Extension is done exclusively through the form strategy. ModelFormStrategy provides a few functions that enable a dependent module to add fields to the form, validate those fields, and set any errors that come back from the server.

Creating an Extensible Custom Form Page

The code for creating an extensible custom form is very similar to the model form example. The only difference is you create an instance of FormStrategy, where there is no need to implement a buildLayout function.

define(['MODA.OrgFormStrategy'], function(){
 
Ext.ns('MODA');
MODA.MyCustomForm = Ext.extend(Ext.form.FormPanel, {
 
	initComponent: function() {
		var extraFields = MODA.OrgFormStrategy.getComponents('EXTRA_FIELDS');
		this.items = [{
			xtype: 'textfield',
			name: 'Name',
			fieldLabel: Labels.get('meta.field.Name')
		}, {
			xtype: 'modellinkfield',
			name: 'Enterprise',
			fieldLabel: Labels.get('meta.field.Enterprise'),
			...
		}].concat(extraFields);
 
		MODA.MyCustomForm.superclass.initComponent.apply(this, arguments);
	},
	...
});
});

There are a couple other functions you should call to complete the implementation of your form strategy and allow full customization by dependent modules: validateComponents and applyErrors .

Because the keys for fetching components are defined by you, they should be documented so that dependent modules know how they can add components to your page.

Extending a Custom Form Page

Extending a custom form page is identical to extending a model form page; assuming the custom form properly implements the FormStrategy class, you can call the addX functions to add fields and validation to the page.