1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    73
    Vote Rating
    0
    SilveR316 is on a distinguished road

      0  

    Default Custom Content Form Field Extension

    Custom Content Form Field Extension


    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.

    Code:
    // 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.

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

    How you use it:

    Code:
    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.
    Attached Images

  2. #2
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    What is the difference between your field and the MiscField?

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    73
    Vote Rating
    0
    SilveR316 is on a distinguished road

      0  

    Default


    Quote Originally Posted by krycek View Post
    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.

  4. #4
    Sencha User
    Join Date
    Jul 2007
    Location
    Moscow, Russia
    Posts
    295
    Vote Rating
    0
    6epcepk is on a distinguished road

      0  

    Default


    Using Panel element working fine for me with Forms.

  5. #5
    Sencha User
    Join Date
    Jun 2007
    Posts
    35
    Vote Rating
    0
    aparajita is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User digerata's Avatar
    Join Date
    Mar 2007
    Location
    Clarkston, Michigan
    Posts
    61
    Vote Rating
    0
    digerata is on a distinguished road

      0  

    Exclamation


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

    Code:
            if (this.directContent)
            {
            	this.contentCt.update(this.content, true);
            }
    Should be:

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

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


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

    Code:
    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
    Last edited by moegal; 15 Jul 2008 at 7:58 AM. Reason: Figured it out!

  8. #8
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    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