From Learn About the Ext JavaScript Library

Contents 1 Extension 2 Usage 3 Config options 4 Events 5 Status 6 Changelog 7 Screenshots 8 Source code 9 Example

Extension

Include it in your FormPanel as plugin and set field width to 'auto' - it will automatically expand all your fields to match FormPanel container width. It provides pixel-perfect resizing, with respect to validation icons on the side. It will ignore fields with fixed width and with grow function enabled.

Usage

• Include Ext.ux.form.FieldAutoExpand.js file in your page/application, after all other Ext files (definitely after ext-base.js and ext-all.js)
• Create new Ext.FormPanel (ie. new Ext.FormPanel({}))
• In it's config, set plugins:[new Ext.ux.grid.FieldAutoExpand()]
• When defining form fields, set width:'auto' or do not set width at all
• All fields set this way will now expand to match formPanel size

See below for an example ...

Config options

• autoExpandMax - optional maximum width a field can get. When this is set in plugin config it will be global for all expanded fields. You can also set autoExpandMax on select fields, to explicitly define their individual maximum widths.
• offsetFix - Amount of pixels to add (substract) from right edge of the container (defaults to -10)

Events

This plugin can be observed for the following events:

• autoexpand - Fires after auto expanding (shrinking) a field. Observer is called with the following params:
  • {Ext.form.Field} field
  • {Number} new width
  • {Ext.ux.form.FieldAutoExpand} plugin object
• beforeautoexpand - Fires just before field is auto expanded (shrunk). Return false to stop expanding. Observer is called with the following params:
  • {Ext.form.Field} field
  • {Number} new width
  • {Ext.ux.form.FieldAutoExpand} plugin object

Status

Released for ExtJS 2.0.x.
Tested in:

• IE 7
• Firefox 2.0.0.13
• Opera 9.25

Changelog

• Ver. : 1.0 First release

Screenshots

See below for the source to this example...

Source code

Ext.ux.form.FieldAutoExpand.js

/**
 * FormPanel plugin for fields autoWidth
 *
 * Include it in your FormPanel as plugin and set field width to 'auto' - it will
 * automatically expand all your fields to match FormPanel container width.
 *
 * @author    Artur Bodera
 * @date      27 March 2008
 *
 * @license Ext.ux.form.FieldAutoExpand is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */
 
/*global Ext */
 
Ext.ns('Ext.ux.form');
 
/**
 * @class Ext.ux.form.FieldAutoExpand
 * @extends Ext.util.Observable
 *
 * Creates new FieldAutoExpand plugin
 * @constructor
 * @param {Object} config The config object
 */
Ext.ux.form.FieldAutoExpand = function(config) {
	Ext.apply(this, config);
 
	// {{{
	this.addEvents(
		/**
		 * @event autoexpand
		 * Fires after auto expanding (shrinking) a field.
		 * @param {Ext.form.Field} field
		 * @param {Number} new width
		 * @param {Ext.ux.form.FieldAutoExpand} plugin object
		 */
		 'autoexpand',
 
		 /**
		 * @event beforeautoexpand
		 * Fires just before field is auto expanded (shrunk). Return false to stop expanding.
		 * @param {Ext.form.Field} field
		 * @param {Number} new width
		 * @param {Ext.ux.form.FieldAutoExpand} plugin object
		 */
		 'beforeautoexpand'
	);
 
	Ext.ux.form.FieldAutoExpand.superclass.constructor.call(this);
};
 
Ext.extend(Ext.ux.form.FieldAutoExpand, Ext.util.Observable, {
 
	// configuration options
	// {{{
	/**
	 * @cfg {Number} offsetFix	Amount of pixels to add (substract) due to elements offset.
	 */
	offsetFix: -10,
 
	/**
	 * @cfg {Number} labelOffsetFix Amount of pixels to add (substract) when label is visible.
	 */
	labelOffsetFix: -5,
 
	/**
	 * @cfg {Number} sideMsgFix Amount of pixels to add (substract) for the field validation icon
	 */
	sideMsgFix: -25,
 
	/**
	 * @cfg {Number} FieldAutoExpand Maximum field width
	 */
	autoExpandMax: 0,
 
 
	// methods
	// {{{
	/**
	 * Init function
	 * @param {Ext.form.FormPanel} formPanel Parent panel for this plugin
	 */
	init:function(formPanel) {
		this.panel = formPanel;
		this.form = this.panel.getForm();
		this.autoWidthFields = [];
		this.panel.on('afterlayout',this.init2,this,{single:true});
		this.panel.on('add',this.init2,this);
		this.panel.on('remove',this.init2,this);
 
	}, // eo function init
 
	// }}}
 
	// {{{
	/**
	 * Scans fields and prepares listener
	 * @private
	 */
	init2:function(){
		this.autoWidthFields = [];
		this.form.items.each(function(f){
			if((f.width == 'auto' || !f.width) && !f.grow)
				this.autoWidthFields[this.autoWidthFields.length] = f;
		},this);
 
		// Adjusts field widths when laying out elements.
		this.panel.on('afterlayout',this.fitWidths,this);
	}, // eo function init2
	// }}}
	// {{{
	/**
	 * Adjusts field widths.
	 * @private
	 */
	fitWidths:function() {
		Ext.each(this.autoWidthFields,function(f){
			if(!this.width1){
				// field width if the label is hidden
				this.width4 = this.form.getEl().down('.x-form-item').getSize(true).width + this.offsetFix;
 
				// field width if the label is hidden and there is validation icon on the side
				this.width3 = this.width4 + this.sideMsgFix;
 
				// field width if the label is visible
				this.width2 = this.width4 - this.panel.labelWidth + this.labelOffsetFix;//
 
				// field width if the label is visible and we have validation icon on the side
				this.width1 = this.width2 + this.sideMsgFix;			
			}
 
			if(!f.hideLabel){	
				if(f.msgTarget == 'side')
					var width = this.width1;
				else
					var width = this.width2;
			}else{
				if(f.msgTarget == 'side')
					var width = this.width3;
				else
					var width = this.width4;
			}
 
			if(this.autoExpandMax && width > this.autoExpandMax)
				width = this.autoExpandMax;
			if(f.autoExpandMax && width > f.autoExpandMax)
				width = f.autoExpandMax;
 
			if(true !== this.eventsSuspended && false === this.fireEvent('beforeautoexpand', f, width,this)) {
				return;
			}else{
				f.setWidth(width);
				this.fireEvent('autoexpand', f, width,this);
			}
		},this);
 
		this.width1 = 0;
	} // eo function fitWidths
	// }}}
});
 
// register xtype
Ext.reg('fieldautoexpand', Ext.ux.form.FieldAutoExpand);
 
// eof

Example

example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">	
	<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext-all-debug.js"></script>
	<script type="text/javascript" src="Ext.ux.form.FieldAutoExpand.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.QuickTips.init();
			var testPanel = new Ext.FormPanel({ 
				url:'login.asp', 
				frame:true, 
				labelWidth: 80,
				defaultType:'textfield',
 
				// This is the only thing you need to include for auto expanding to work!
				plugins: [new Ext.ux.form.FieldAutoExpand()],
 
 
 
				items:[
					{
						fieldLabel: 'First field',
						width: 200,
						value: 'field with fixed width...'
					},
					{
						fieldLabel: 'Second field',
						validationEvent: false,
						value: 'field with auto width and no validation'
					},
					{
						fieldLabel: 'Third field',
						minLength: 50,
						value: 'field with auto width and minLenght 50'
					},
					{
						fieldLabel: 'Fourth field',
						validator: function(){return false},
						msgTarget: 'side',
						value: 'always invalid field with validation icon on right'
					},
					{
						fieldLabel: 'Fifth field',
						validator: function(){return false},
						hideLabel: true,
						msgTarget: 'side',
						value: 'always invalid field with no label and validation icon on right'
					},
					{
						fieldLabel: 'Sixth field',
						validator: function(){return false},
						hideLabel: true,
						msgTarget: 'title',
						value: 'always invalid field with no label and validation as html title'
					},
					{
						fieldLabel: 'Seventh field',
						msgTarget: 'side',
						xtype:'combo',
						value: 'Combo with with validation validation icon on right'
					},
					{
						fieldLabel: 'Eight field',
						msgTarget: 'title',
						xtype:'combo',
						value: 'Combo with with validation message as html title'
					},
					{
						fieldLabel: 'Nineth field',
						msgTarget: 'title',
						xtype:'textarea',
						value: 'This is mighty big textarea, also expanding'
					}
				]
			});
 
			var testWindow = new Ext.Window({
				layout: 'fit',
				width: 500,
				height: 400,
				title:'Form FieldAutoExpand test',
				closable: false,
				resizable: true,
				collapsible: false,
				maximizable: true,
				items:[testPanel],
				bbar:['Try to resize this window to see how fields automatically adjust their width...']
			});
			testWindow.show();
 
		});
	</script>
	</head>
	<body></body>
</html>