Clearable button for datefield

**simon** · 19 Jun 2009 4:10 AM

I would like to add clearable button to datefield (I think it should have it by default). I tried like this, it works, but positioning is not ok. Is tehere some other solution?

Code:

<html>
<head>

<script type="text/javascript">
    Ext.onReady(function() {
        var datefield = new Ext.form.DateField({
            width: 220,
            fieldLabel: 'Date',
            name: 'date',
            id: 'date1'
        });
        datefield.render('datefield');

        var clearableField = new Ext.form.TriggerField({
            triggerClass: "x-form-trigger x-form-clear-trigger",
            emptyText: "",
            value: ""
        });
        clearableField.onTriggerClick = function() {
            this.reset();
        };
        
        clearableField.applyToMarkup(datefield.id);
        
    });
</script>
</head>
<body>
 <div id="datefield"></div>
</body>
</html>

**evant** · 19 Jun 2009 4:21 AM

Look at the source for TwinTriggerField, there's no "triggerClass".

**Animal** · 19 Jun 2009 4:29 AM

I think TriggerField should be done away with.

TwinTriggerField should be the base class for all fields which show a dropdown on click of a trigger.

The prototype should contain

Code:

    trigger2Class: 'x-hide-display',

So that it defaults to looking like a regular single-trigger TriggerField.

The onTriggerClick and triggerClass function/class name should just be aliases for onTrigger1Click and trigger1Class.

This would save code, and make it easy to add extra trigger functionality to existing TriggerField subclasses.

**Animal** · 19 Jun 2009 4:34 AM

Our SelectField subclass has a second trigger. Receiving depot and Destination depot:

**Animal** · 19 Jun 2009 4:37 AM

While we're talking about it, TwinTriggerField (Let's forget about TriggerField) needs two more configs:

Code:

trigger1Tooltip: 'Click to see selection list',
trigger2Tooltip: 'Click to clear selection'

**MatjazH** · 19 Jun 2009 6:07 AM

I have borrowed a code from "Ext.ux.TwinCombo"

PHP Code:


Ext.onReady(function() {



var trigger = new Ext.ux.TwinDateField({

 

 width: 120,

 name: 'date',

 value: Ext.get('datum').getValue(),

 

     trigger1Class:'x-form-clear-trigger',

     trigger2Class:'x-form-date-trigger',

 onTrigger1Click: function() {

 

  trigger.setValue('') ;

 

 }

    });



 trigger.applyToMarkup('datum');

}); 



Ext.ux.TwinDateField = Ext.extend(Ext.form.DateField, {

    initComponent: function() {

        this.triggerConfig = {

            tag:'span', cls:'x-form-twin-triggers', cn:[

            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},

            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}

        ]};

        Ext.ux.TwinDateField.superclass.initComponent.call(this);

    },

    getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,

    initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,

    onTrigger2Click: Ext.form.DateField.prototype.onTriggerClick,

    trigger1Class: Ext.form.DateField.prototype.triggerClass

});

Simon, have fun

**pipiet06** · 3 Aug 2010 11:40 PM

Originally Posted by Animal

Our SelectField subclass has a second trigger. Receiving depot and Destination depot:

animal,, how if i wanna get the combo like "receiving report" which is have another button to clear value of the combo?

**Animal** · 4 Aug 2010 12:51 AM

Do a forum search for TwinTriggerCombo

Someone even posteda fix on the TwinTriggerCombo thread yesterday.

**Animal** · 4 Aug 2010 1:01 AM

Here: http://www.sencha.com/forum/showthre...225#post232225

And the fix is the last post.

**pipiet06** · 4 Aug 2010 1:09 AM

thanks for ur fast reply..

is that possible to create in ext 2.3 ?

Clearable button for datefield

Thread Tools

Search Thread

Display

Clearable button for datefield

Clearable button for datefield

solved

solved