<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-layout-container-Form'>/**
</span> * This is a layout that will render form Fields, one under the other all stretched to the Container width.
*
* @example
* Ext.create('Ext.Panel', {
* width: 500,
* height: 300,
* title: "FormLayout Panel",
* layout: 'form',
* renderTo: Ext.getBody(),
* bodyPadding: 5,
* defaultType: 'textfield',
* items: [{
* fieldLabel: 'First Name',
* name: 'first',
* allowBlank:false
* },{
* fieldLabel: 'Last Name',
* name: 'last'
* },{
* fieldLabel: 'Company',
* name: 'company'
* }, {
* fieldLabel: 'Email',
* name: 'email',
* vtype:'email'
* }, {
* fieldLabel: 'DOB',
* name: 'dob',
* xtype: 'datefield'
* }, {
* fieldLabel: 'Age',
* name: 'age',
* xtype: 'numberfield',
* minValue: 0,
* maxValue: 100
* }, {
* xtype: 'timefield',
* fieldLabel: 'Time',
* name: 'time',
* minValue: '8:00am',
* maxValue: '6:00pm'
* }]
* });
*
* Note that any configured {@link Ext.Component#padding padding} will be ignored on items within a Form layout.
*/
Ext.define('Ext.layout.container.Form', {
/* Begin Definitions */
alias: 'layout.form',
extend: 'Ext.layout.container.Auto',
alternateClassName: 'Ext.layout.FormLayout',
/* End Definitions */
tableCls: Ext.baseCSSPrefix + 'form-layout-table',
type: 'form',
manageOverflow: 2,
childEls: ['formTable'],
padRow: '<tr><td class="' + Ext.baseCSSPrefix + 'form-item-pad" colspan="3"></td></tr>',
renderTpl: [
'<table id="{ownerId}-formTable" class="{tableCls}" style="width:100%" cellpadding="0">',
'{%this.renderBody(out,values)%}',
'</table>',
'{%this.renderPadder(out,values)%}'
],
getRenderData: function(){
var data = this.callParent();
data.tableCls = this.tableCls;
return data;
},
calculate : function (ownerContext) {
var me = this,
containerSize = me.getContainerSize(ownerContext, true),
tableWidth,
childItems,
i = 0, length;
// Once we have been widthed, we can impose that width (in a non-dirty setting) upon all children at once
if (containerSize.gotWidth) {
this.callParent(arguments);
tableWidth = me.formTable.dom.offsetWidth;
childItems = ownerContext.childItems;
for (length = childItems.length; i < length; ++i) {
childItems[i].setWidth(tableWidth, false);
}
} else {
me.done = false;
}
},
getRenderTarget: function() {
return this.formTable;
},
getRenderTree: function() {
var me = this,
result = me.callParent(arguments),
i, len;
for (i = 0, len = result.length; i < len; i++) {
result[i] = me.transformItemRenderTree(result[i]);
}
return result;
},
transformItemRenderTree: function(item) {
if (item.tag && item.tag == 'table') {
item.tag = 'tbody';
delete item.cellspacing;
delete item.cellpadding;
// IE6 doesn't separate cells nicely to provide input field
// vertical separation. It also does not support transparent borders
// which is how the extra 1px is added to the 2px each side cell spacing.
// So it needs a 5px high pad row.
if (Ext.isIE6) {
item.cn = this.padRow;
}
return item;
}
return {
tag: 'tbody',
cn: {
tag: 'tr',
cn: {
tag: 'td',
colspan: 3,
style: 'width:100%',
cn: item
}
}
};
},
isValidParent: function(item, target, position) {
return true;
},
isItemShrinkWrap: function(item) {
return ((item.shrinkWrap === true) ? 3 : item.shrinkWrap||0) & 2;
},
getItemSizePolicy: function(item) {
return {
setsWidth: 1,
setsHeight: 0
};
}
});
</pre>
</body>
</html>