Custom Content Form Field Extension

[SilveR316]

I created a custom content field for extjs 2.0. I had a requirement to show some custom content in a field, but extjs does not have support for something like this (at least that I can see).

This field supports fetching content from another div on the page, ajax, or just whatever you put in the configuration.

// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');

/**
 * @class Ext.ux.CustomContentField
 * @extends Ext.form.Field
 * Basic custom content field
 * @constructor
 * Creates a new custom content field
 * @param {Object} config Configuration options
 * @author Bart Wegrzyn <bart.wegrzyn@gmail.com>
 */
Ext.ux.CustomContentField = Ext.extend(Ext.form.Field, {

	// private
	defaultAutoCreate: {
		tag: 'div',
		cls: 'x-customcontent-field'
	},

	// private
	initComponent: function() {
		Ext.ux.CustomContentField.superclass.initComponent.call(this);
		this.addEvents(
			/**
			 * @event load
			 * Fires when the content is loaded into the field
			 * @param {Ext.ux.CustomContentField} this
			 * @param {Object} file
			 */
			'load'
		);
	},

	// private
	initValue: Ext.emptyFn,

	// private
	onRender: function(ct, position){
        Ext.ux.CustomContentField.superclass.onRender.call(this, ct, position);

        this.contentCt = ct.select('div.x-customcontent-field').item(0);

        if (this.loadText)
        {
        	this.contentCt.update(this.loadText);
        }

		this.loadContent();
	},

	/**
	 * Updates the content of the field from
	 */
	loadContent: function() {
		// clear out previous content
		this.contentCt.update('');

        if (this.directContent)
        {
        	this.contentCt.update(this.content, true);
        }
        else if (this.divContent)
        {
			el = Ext.get(this.divContent);
			if (el)
			{
				el.remove();
				this.contentCt.appendChild(el);
			}
        }
        else if (this.ajaxContent)
        {
			Ext.Ajax.request({
				url: this.ajaxContent,
				scope: this,
				success: function(response, request) {
					try
					{
						Ext.DomHelper.overwrite(this.contentCt, Ext.decode(response.responseText));
					}
					catch (e)
					{
						this.contentCt.update(response.responseText, true);
					}
				}
			});
        }

        if (this.autoShow)
        {
        	this.contentCt.first().show();
        }

        this.fireEvent('load', this);
	},

	/**
	 * Reloads the content of the field
	 */
	reload: function() {
		this.loadContent();
	},

	/**
	 * Returns the field element (ie. 'this')
	 */
	getValue: function() {
		return this.contentCt;
	}
});
Ext.reg('customcontent', Ext.ux.CustomContentField);

And the css for it.

/**
 * Ext.ux.CustomContentField
 *
 */
.x-customcontent-field {
	font-size: 93%;
	padding:3px 3px 3px 0pt;
}

How you use it:

new Ext.FormPanel({
	items: [{
		fieldLabel: 'Custom Content Field',
		id: 'account_logo',
		xtype: 'customcontent',
		loadText: 'Loading...',
		directContent: 'This will show up in the field'
	}]
}

You can use the following settings INSTEAD OF directContent.

This pulls the content from another div on the page:
divContent: 'id_of_element'

This pulls the content from the server through an ajax request:
ajaxContent: 'http://localhost/getcontent.php'

With ajaxContent, you return a json config string that Ext.DomHelper will understand, and the content will be replaced with that. Otherwise, the content will be replaced with whatever gets returned.

In the example image I have attached, the content its fetched through an ajax request, which returns the necessary json config string that Ext.DomHelper takes.

Remember, this field acts like a regular form field, so all the api functions and configs you can find on the Ext.form.Field doc page also apply to this field.

[krycek]

What is the difference between your field and the MiscField?

[SilveR316]

What is the difference between your field and the MiscField?

MiscField doesnt work for 2.0 (as far as I know) and it doesn't support grabbing content from another element or through an ajax response. I haven't taken an in depth look at MiscField, I just posted this code in response to another post. I tend to write my own extensions as then I know what is going on and how it works.

[6epcepk]

Using Panel element working fine for me with Forms.

[aparajita]

Hi,

For those of you looking only for streamlined use of static text labels, I made a variation on MiscField/CustomContentField called StaticTextField:

http://extjs.com/forum/showthread.php?t=20992

[digerata]

There is a bug around line 59 that prevents the directContent parameter from working:

        if (this.directContent)
        {
        	this.contentCt.update(this.content, true);
        }

Should be:

        if (this.directContent)
        {
        	this.contentCt.update(this.directContent, true);
        }

[moegal]

Hi, looking to use your extension now. Very nice. Can I create the element as a var 1st like so?

var ccf1 = new Ext.form.CustomContentField({
	fieldLabel: 'New Site Latitude',
	id: 'account_logo',
	loadText: 'Loading...',
	ajaxContent: 'test/test-ajax.asp'
});

It does not seem to work. Any ideas?

Marty

Changed to new Ext.ux.CustomContentField

[moegal]

Any one have this working on version 3+

I don't see any errors but I do not see the content either.

Any help would be appreciated.

Marty