form

Ext JS Buttons in a FormPanel, not the button bars

I put buttons inside a FormPanel, but not inside the top or button toolbar, but instead as an item on the form. I actually did this on two different forms, two different ways. For both, I wanted the buttons be in the field portion of the FormLayout, but to have no field label.

Button and a link

I used a Container to house the button and the link.

{
	xtype: 'container',
	fieldLabel: ' ',
	labelSeparator: '',
	anchor: '-50',
	layout: 'hbox',
	layoutConf : {
		pack: 'start'
	},
	items: 
	[
		{
			xtype: 'button',
			text: 'Send',
			width: 100,
			scope: this,
			handler: this.handleSend
		},
		{
			itemId: 'resestLink',
			xtype: 'box',
			autoEl: {
				tag: 'a',
				href: '#',
				html: 'Reset Fields',
				style: 'padding-top: 5px; padding-right: 10px; padding-left: 10px'
			},
			listeners: {
				scope: this,
				render: function(c){
					c.getEl().on('click', this.onResetClick, this, {stopEvent: true});
				}
			}
		}
	]
}

Two buttons

I used a ButtonGroup to house the buttons.  The tricky part was getting the buttons spaced as I wanted them, and what I came up with is okay, but could probably be improved with a little more time.

{
	xtype: 'buttongroup',
	fieldLabel: ' ',
	labelSeparator: '',
	frame: false,
	defaults : {
		width: 90 // ended up being the width of the buttons
	},
	width: 200, // is the width of the table (table layout is the default for ButtonGroup)
	items: 
	[
		{
			xtype: 'button',
			text: 'Find By User',
			scope: this,
			handler: this.handleFind
		},
		{
			xtype: 'button',
			text: 'Find All',
			scope: this,
			handler: this.handleFindAll
		}
	]
}
Advertisements

Ext JS – A (very simple) email form with character counter

This super simple email form is for when the email recipients are already known and cannot be changed on the email form. I worked out two things I want to remember on this form – created a “tip” to expand the contents of an input field and also have a “amount of chars remaining” counter updating on the form. The counter shows the number of chars remaining and then when the limit is reached, the Ext JS validation “msg” text is shown. Here are some pictures (condensed).

Note: Ext JS 4 version at https://gist.github.com/aghuddleston/5357858.

Now the code snippets of the interesting parts. This is condensed a bit. The formpanel is in an Ext JS window, that I extended. The code for that is not here, but all the important bits and pieces should be.


	// snip
		new Ext.form.FormPanel({
			labelWidth: 167,
			defaultType: 'displayfield',
			baseCls: 'x-plain',
			itemId: 'emailform',
			items: [
				{
					xtype: 'container',
					layout: 'form',
					labelWidth: 55,
					anchor: '100%',
					items: {
						xtype: 'trigger',
						itemId: 'sendto',
						ref: '../../sendto',
						fieldLabel: 'Send To',
						value: this.getSendTos(),
						// name: 'to',
						submitValue: false,
						anchor: '-5',
						editable: false,
						scope: this,
						onTriggerClick : this.onSendToClick.createDelegate(this)
					}
				},
				{
					id: 'emailbody',
					itemId: 'emailbody',
					xtype: 'textarea',
					hideLabel: true,
					name: 'message',
					msgTarget: 'under',
					maxLength: 2000,
					anchor: '-5 -53',
					enableKeyEvents: true,
					listeners : {
						scope : this,
						keydown: this.updateTextCtr,
						keyup: this.updateTextCtr,
						focus: this.closeSendToTip
					}
				},
				{
					xtype: 'displayfield',
					itemId: 'textCtr',
					fieldLabel: 'Allowed characters remaining',
					hideParent: true,
					anchor: '-10'
				} 
			]
		});
	// snip

	buildSendToTip : function () {
		return new Ext.Tip({
			html: this.getSendTos(),
			closable: true,
			width: 400 // initial width needed to make the sizing work
		});
	},

	closeSendToTip : function () {
		if (this.sendToTip.isVisible()) {
			this.sendToTip.hide();
		}
	},
	
	/**
	 * When the user clicks in the send to box, pop open a tooltip that
	 * shows the complete list of the user ids this email is going to.
	 * The tip should cover the send to trigger field, right aligining
	 * with it, up to a maximum of 500px.
	 */
	onSendToClick : function (event) {
		var width = this.sendto.getWidth(),
			position = this.sendto.getPosition(),
			xpos;
		
		// Figure out how wide the tip should be, the max is 500
		if (width > 500) {
			xpos = position[0] + (width - 500);
			position[0] = xpos;
			width = 500;
		}
		
		this.sendToTip.setWidth(width);
		this.sendToTip.doLayout();
		this.sendToTip.showAt(position);
	},


	/**
	 * Update the 'Allowed chars remaining' text as the user types. Once the
	 * limit is reached, the Ext validation tip will display under the 
	 * text area and the allowed char remaining field will be hidden.
	*/
	updateTextCtr : function (body, event) {
		var form = this.getComponent('emailform'),
			ctr = form.getComponent('textCtr'),
			ctrEl = ctr.getEl(),
			text = body.getValue(),
			maxLength = body.maxLength;
			
		if (text.length > maxLength) {
			ctr.hide();
			ctrEl.up('.x-form-item').setDisplayed(false);
		} else {
			if (!ctr.isVisible()) {
				ctr.show();
				ctrEl.up('.x-form-item').setDisplayed(true);
			}
			ctr.setValue(maxLength - text.length);
		}
	}

	// extraInit is called on the window show event 
	extraInit : function () {
		var form = this.getComponent('emailform'),
			body = form.getComponent('emailbody'),
			ctr = form.getComponent('textCtr');
		
		ctr.setValue(body.maxLength);
	}

	// also destroying the tip on the window destroy event

Ext JS Disabling Form Field Labels

Making a form field label look disabled when the form field is disabled by adding an override to Ext JS.

Ext.override(Ext.form.Field, {
    onDisable : function(){
        Ext.form.Field.superclass.onDisable.call(this);
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if (label) label.addClass(['find-label-disabled', 'x-item-disabled']);
        }
    },
    onEnable : function(){
        Ext.form.Field.superclass.onEnable.call(this);
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if(label) label.removeClass(['find-label-disabled', 'x-item-disabled']);
        }
    }
});

In this specific case, I had to add

	.find-label-disabled {
		background-color: white;
	}

since the background was white and I didn’t want funny green text.

Unfortunately, I no longer have the link to the posting in the Ext JS forums.

Ext JS – Disabled Form Fields in Firefox Look Green

If you have a field on a FormPanel that is a nice greenish color in Firefox instead of gray when disabled, then you need to set the background color on the container. At least that is what worked for me. This was specifically occurring on a checkbox. I had to add

.x-form-check-wrap {
    background-color: white;
}

to my styles to fix it.

My situation was a FormPanel where frame was set to false and therefore my form had a white background. Here is a picture of the offending checkbox:

Helpful Links:
Disabled Elements in Firefox 3-4
Firefox Opacity, Text Gets Weird

Ext JS – Putting a link in a FormPanel

I wanted to put a link in a FormPanel. I found some helpful posts in the forum and here it is in a nutshell (thanks to Condor’s postings). The idea is creating a BoxComponent with an href element. During render, attach a listener to the href for the click event. Watch out for scope!

{
    itemId: 'resestLink',
    xtype: 'box',
    autoEl: {
        tag: 'a',
        href: '#',
        html: 'Reset Criteria'
    },
    listeners: {
        scope: this,
        render: function(c){
            c.getEl().on('click', this.onResetClick, this, {stopEvent: true});
        }
    }
}

Link to related posting on Ext JS forums:
Add hyperlink in FormPanel

ExtJS Hiding form field labels along with the field

Seems obvious, doesn’t it? You want to hide a field on your ExtJS FormPanel and you do, but the label is still there. There are a few threads on the ExtJS forum about this, ranging from overrides to simple code solutions. The idea behind the code is this: hide the field and the div that contains the label by walking up the dom

field.hide() //or setVisible(false), whatever you are looking for
field.getEl().up('.x-form-item').setDisplayed(false);

And some links to the forums to get started finding some overrides…
How to display a hidden label
Hiding the combobox and the label sometime