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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar