1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    155
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default Clearable button for datefield

    Clearable button for datefield


    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>

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Look at the source for TwinTriggerField, there's no "triggerClass".
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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


  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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'

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Ljubljana, Slovenia
    Posts
    13
    Vote Rating
    0
    MatjazH is on a distinguished road

      0  

    Talking solved

    solved


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


    PHP Code:
    Ext.onReady(function() {

    var 
    trigger = new Ext.ux.TwinDateField({
     
     
    width120,
     
    name'date',
     
    valueExt.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"srcExt.BLANK_IMAGE_URLcls"x-form-trigger " this.trigger1Class},
                {
    tag"img"srcExt.BLANK_IMAGE_URLcls"x-form-trigger " this.trigger2Class}
            ]};
            
    Ext.ux.TwinDateField.superclass.initComponent.call(this);
        },
        
    getTriggerExt.form.TwinTriggerField.prototype.getTrigger,
        
    initTriggerExt.form.TwinTriggerField.prototype.initTrigger,
        
    onTrigger2ClickExt.form.DateField.prototype.onTriggerClick,
        
    trigger1ClassExt.form.DateField.prototype.triggerClass
    }); 
    Simon, have fun

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Location
    Indonesia
    Posts
    77
    Vote Rating
    0
    pipiet06 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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?
    Thanks
    _pipiet_

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Do a forum search for TwinTriggerCombo

    Someone even posteda fix on the TwinTriggerCombo thread yesterday.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

    And the fix is the last post.

  10. #10
    Sencha User
    Join Date
    Jun 2010
    Location
    Indonesia
    Posts
    77
    Vote Rating
    0
    pipiet06 is on a distinguished road

      0  

    Default


    thanks for ur fast reply..

    is that possible to create in ext 2.3 ?
    Thanks
    _pipiet_