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