Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

Threaded View

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    0
    Nullity is on a distinguished road

      0  

    Default [v1.1] new Ext.form field type - MiscField

    [v1.1] new Ext.form field type - MiscField


    I wanted a way to display just simple text, with or without a label, in my form layout. Second, I wanted a way to display a label, but with no associated form field. This extension solved all of my needs, and more.

    In addition to being able to accomplish the above, you can now also easily add images, buttons, etc, to your form layout.

    Examples:
    Code:
    // regular MiscField field with plain text
    new Ext.form.MiscField({
    	fieldLabel: 'MiscField',
    	id: 'miscfield',
    	width: 160,
    	value: 'blah blah blah'
    });
    
    // label with a blank field - just don't set the 'value' option
    new Ext.form.MiscField({
    	fieldLabel: 'MiscField',
    	id: 'miscfield_novalue',
    	width: 160
    })
    
    // MiscField with image and bold text
    new Ext.form.MiscField({
    	fieldLabel: 'MiscField',
    	id: 'miscfield_image',
    	width: 160,
    	value: '<img src="/path/drop-yes.gif"> image and <b>bold text</b>'
    });
    ... this produces what you see in the attached image (along with a couple TextFields for comparison).

    Any methods/functions/events/etc that are related to a form input field have been stripped out (i.e. validation, focus/blur, etc) as they are no longer necessary. Some things may work a little differently. For example, you can use HTML tags in the 'value' option. Calling 'miscfield.getRawValue()' will return the MiscField value, exactly as it is, HTML and all. However, calling 'miscfield.getValue()' returns the text only and strips out all HTML tags. Same deal for 'setValue()' and 'setRawValue()'.

    This should be obvious, but I'll mention it anyway just in case; using a MiscField is only for visual purposes - as in adding more functionality to the form layout. MiscFields do not post any data when submitting a form.

    Here is the code:
    Code:
    /**
     * @class Ext.form.MiscField
     * @extends Ext.BoxComponent
     * Base class to easily display simple text in the form layout.
     * @constructor
     * Creates a new MiscField Field
     * @param {Object} config Configuration options
     */
    Ext.form.MiscField = function(config){
        Ext.form.MiscField.superclass.constructor.call(this, config);
    };
    
    Ext.extend(Ext.form.MiscField, Ext.BoxComponent,  {
        /**
         * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
         * {tag: "div"})
         */
        defaultAutoCreate : {tag: "div"},
    
        /**
         * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
         */
        fieldClass : "x-form-field",
    
        // private
        isFormField : true,
    
        /**
         * @cfg {Mixed} value A value to initialize this field with.
         */
        value : undefined,
    
        /**
         * @cfg {Boolean} disableReset True to prevent this field from being reset when calling Ext.form.Form.reset()
         */
        disableReset: false,
    
        /**
         * @cfg {String} name The field's HTML name attribute.
         */
        /**
         * @cfg {String} cls A CSS class to apply to the field's underlying element.
         */
    
        // private ??
        initComponent : function(){
            Ext.form.MiscField.superclass.initComponent.call(this);
        },
    
        /**
         * Returns the name attribute of the field if available
         * @return {String} name The field name
         */
        getName: function(){
             return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
        },
    
        // private
        onRender : function(ct, position){
            Ext.form.MiscField.superclass.onRender.call(this, ct, position);
            if(!this.el){
                var cfg = this.getAutoCreate();
                if(!cfg.name){
                    cfg.name = this.name || this.id;
                }
                this.el = ct.createChild(cfg, position);
            }
    
            this.el.addClass([this.fieldClass, this.cls]);
            this.initValue();
        },
    
        /**
         * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
         * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
         * @return {Ext.form.MiscField} this
         */
        applyTo : function(target){
            this.allowDomMove = false;
            this.el = Ext.get(target);
            this.render(this.el.dom.parentNode);
            return this;
        },
    
        // private
        initValue : function(){
            if(this.value !== undefined){
                this.setRawValue(this.value);
            }else if(this.el.dom.innerHTML.length > 0){
                this.setRawValue(this.el.dom.innerHTML);
            }
        },
    
        /**
         * Returns true if this field has been changed since it was originally loaded.
         */
        isDirty : function() {
            return String(this.getRawValue()) !== String(this.originalValue);
        },
    
        // private
        afterRender : function(){
            Ext.form.MiscField.superclass.afterRender.call(this);
            this.initEvents();
        },
    
        /**
         * Resets the current field value to the originally-loaded value
         * @param {Boolean} force Force a reset even if the option disableReset is true
         */
        reset : function(force){
            if(!this.disableReset || force === true){
                this.setRawValue(this.originalValue);
            }
        },
    
        // private
        initEvents : function(){
            // reference to original value for reset
            this.originalValue = this.getRawValue();
        },
    
        /**
         * Returns whether or not the field value is currently valid
         * Always returns true, not used in MiscField.
         * @return {Boolean} True
         */
        isValid : function(){
            return true;
        },
    
        /**
         * Validates the field value
         * Always returns true, not used in MiscField.  Required for Ext.form.Form.isValid()
         * @return {Boolean} True
         */
        validate : function(){
            return true;
        },
    
        processValue : function(value){
            return value;
        },
    
        // private
        // Subclasses should provide the validation implementation by overriding this
        validateValue : function(value){
            return true;
        },
    
        /**
         * Mark this field as invalid
         * Not used in MiscField.  Required for Ext.form.Form.markInvalid()
         */
        markInvalid : function(){
            return;
        },
    
        /**
         * Clear any invalid styles/messages for this field
         * Not used in MiscField.  Required for Ext.form.Form.clearInvalid()
         */
        clearInvalid : function(){
            return;
        },
    
        /**
         * Returns the raw field value.
         * @return {Mixed} value The field value
         */
        getRawValue : function(){
            return this.el.dom.innerHTML;
        },
    
        /**
         * Returns the clean field value - plain text only, strips out HTML tags.
         * @return {Mixed} value The field value
         */
        getValue : function(){
            var f = Ext.util.Format;
            var v = f.trim(f.stripTags(this.getRawValue()));
            return v;
        },
    
        /**
         * Sets the raw field value.
         * @param {Mixed} value The value to set
         */
        setRawValue : function(v){
            this.value = v;
            if(this.rendered){
                this.el.dom.innerHTML = v;
            }
        },
    
        /**
         * Sets the clean field value - plain text only, strips out HTML tags.
         * @param {Mixed} value The value to set
         */
        setValue : function(v){
            var f = Ext.util.Format;
    	this.setRawValue(f.trim(f.stripTags(v)));
        }
    });
    ... and here is the associated CSS (this might be able to be improved on a little):
    Code:
    .x-form-miscfield {
    	height: 22px;
    	line-height: 18px;
    	vertical-align: middle;
    	overflow: hidden;
    }
    .ext-ie .x-form-miscfield {
        height: 22px; /* ie quirks */
        line-height: 18px;
    }
    .ext-strict .x-form-miscfield {
        height: 18px;
    }
    .ext-safari .x-form-miscfield {
        height: 20px; /* safari always same size */
    }
    .ext-gecko .x-form-miscfield {
        padding-top: 2px; /* FF won't center the text vertically */
        padding-bottom: 0;
    }

    UPDATE 1: Added new 'disableReset' option as proposed by devnull. When true, this field is untouched when the reset() method is called (i.e. from a form reset). Also, if 'disableReset' is true, but you would like to force a reset manually, you can do so by passing 'true' to the reset method (i.e. miscfield.reset(true);)

    UPDATE 2 (9/21/07): Refactored code to be more compatible with Ext 1.1.x (was previously based off of Ext 1.0).
    Attached Images
    Last edited by Nullity; 21 Sep 2007 at 7:51 AM. Reason: version 1.1