View Full Version : How to add Icon for Required Fields in a form ?

28 Mar 2010, 6:12 PM

I Want to add icon for required fields (allowBlank: false) in a form. I tried to replicate what qtip does when it validates the invalid fields in a form.

I tried to follow some posts in the forums, but no luck.

Can somebody please point me in the correct direction?

Thanks in advance.

28 Mar 2010, 10:38 PM
I'm not entirely sure what you're looking for. Are you looking for a way to get your own icon where the error one would normally go for msgTarget: side? I threw together some code that does that. It's not completely generalized, but it could get you started. It just copies what the error icon code does.

If you're just looking to set the style, you could try the cls and ctCls config options. Personally, I've usually used the field label style for marking fields as required.

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script language="JavaScript" src="extjs/adapter/ext/ext-base.js"></script>
<script language="JavaScript" src="extjs/ext-all.js"></script>

<script language="JavaScript">

MyStuff.test.addInfoIcon = function(field, infoMessages)
var messageText = "";

for(var i = 0; i < infoMessages.length; i++) {
messageText += infoMessages[i];

if((i + 1) < infoMessages.length) {
messageText += '<BR>';

var iconContainer = field.getEl().up('.x-form-element', 5, true);

var infoIcon = iconContainer.createChild({
cls: 'x-form-info-icon',
tag: 'img',
src: 'extjs/resources/images/default/window/icon-info.gif',
width: 16,
height: 18
field.infoIcon = infoIcon;

var xPosition = 2;
var yPosition = 0;
infoIcon.alignTo(field.getEl(), 'tl-tr', [xPosition,yPosition]);
infoIcon.dom.qtitle = 'Field Information';
infoIcon.dom.qtip = messageText;

var myForm = new Ext.form.FormPanel(
"xtype": "form",
"title": "My Form",
"labelWidth": 100,
"labelAlign": "left",
"layout": "form",
"width": 490,
"height": 250,
"padding": 10,
"items": [
id: 'field1',
"xtype": "textfield",
"fieldLabel": "Label",
"allowBlank": false,
msgTarget: 'side',
//hijack so that error icon is after input
alignErrorIcon : function(){
this.errorIcon.alignTo(this.infoIcon, 'tl-tr', [2, 0]);
Ext.getCmp('field1').on('render', function(field){
MyStuff.test.addInfoIcon(field, ['This field is required.']);


26 May 2010, 6:34 PM
See this other post, http://bit.ly/dvsP6G