Layouts

As you saw in the previous section, one of the properties available on the ModelFormPanel is layoutStrategy, which allows you to completely customize the layout of the fields displayed to the user. It can be 2 things:

singlecolumn - lays out all fields in a single column.

- twocolumnabab (or simply 'twocolumn') - lays out first field in column A, second in column B, third in column A, fourth in column B, and so forth.
- twocolumnaabb - divides the fields at the mid point and puts the first half in column A, the second in column B.A string representing a preset layout. Currently, there are 3 preset layouts:
An object containing a single function, buildLayout, which takes as input a MixedCollection of fields received from the server, and is intended to return a config object that will be used to construct the form.

Building off the basic example below is a custom layout that organizes specific fields into 2 columns. Note that fields is an instance of Ext.util.MixedCollection, and a function getFields has been added which has the same behavior as get, except it returns an empty hidden field if the field is not found, enabling you to use the same layout with multiple views.

define(function(){
 
Ext.ns('SHOW');
SHOW.CustomTaskLayout = {
 
	buildLayout: function(fields) {
		var cfg = {
			xtype: 'container'
			,items: [{
				xtype: 'container'
				,layout: 'column'
				,items: [{
					xtype: 'container'
					,layout: 'form'
					,items: [
						fields.getField('Summary')
						,fields.getField('Description')
						,fields.getField('Priority')
						,fields.getField('Status')
						,fields.getField('FunctionalArea')
					]
					,width: 450
				}, {
					xtype: 'container'
					,layout: 'form'
					,items: [
						fields.getField('AssignedUser')
						,fields.getField('EstimatedEffortDays')
						,fields.getField('EstimatedCompletionDate')
						,fields.getField('ActualCompleteDate')
					]
					,width: 450
				}]
			}]
		};
		return cfg;
	}
};
 
SHOW.TaskDetail = Ext.extend(One.model.ModelFormContainer, {
 
	modelInfo: { modelLevelType: 'SHOW.Task' }
	,createActionName: 'SHOW.CreateTask'
	,detailViewName: 'SHOW.TaskDetail'
 
	,defaultConfig: {
		layoutStrategy: SHOW.CustomTaskLayout
	}
});
});