Ext.ns('Ext.ux.form');

Ext.ux.form.DeleteField = Ext.extend(Ext.form.TriggerField, {
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
    
    initComponent : function(){
        Ext.ux.form.DeleteField.superclass.initComponent.call(this);
        if ((this.hiddenValue)&&(!this.hiddenName)) this.hiddenName=this.name;
    },

    validationEvent:false,
    validateOnBlur:false,
    submitValue: false,
    triggerClass:'x-form-clear-trigger',
    width:180,

    onTriggerClick : function()
    {
            this.el.dom.value = '';
    },

    onRender : function(ct, position)
    {
        Ext.ux.form.DeleteField.superclass.onRender.call(this, ct, position);
        if(this.hiddenName||this.hiddenValue)
        {
            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, value: this.hiddenValue,
                    id: (this.hiddenId||this.hiddenName)}, 'before', true);
        }
    },
    
    onDestroy : function()
    {
        Ext.destroyMembers(this, 'hiddenField');
        Ext.ux.form.DeleteField.superclass.onDestroy.call(this);    	
    },

    getName: function()
    {
        var hf = this.hiddenField;
        return hf && hf.name ? hf.name : this.hiddenName || Ext.ux.form.DeleteField.superclass.getName.call(this);
    }
});