123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <!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>
|