Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Clearable button for datefield

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    314
    Vote Rating
    5
      0  

    Default 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 User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,940
    Vote Rating
    917
      0  

    Default

    Look at the source for TwinTriggerField, there's no "triggerClass".
    Twitter - @evantrimboli
    Former framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,649
    Vote Rating
    60
      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.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,649
    Vote Rating
    60
      0  

    Default

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

    Longtime Sencha engineer. Now surplus to requirements apparently...

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,649
    Vote Rating
    60
      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'
    Longtime Sencha engineer. Now surplus to requirements apparently...

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Ljubljana, Slovenia
    Posts
    13
    Vote Rating
    0
      0  

    Talking 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
      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
    Bédoin/Redwood City
    Posts
    30,649
    Vote Rating
    60
      0  

    Default

    Do a forum search for TwinTriggerCombo

    Someone even posteda fix on the TwinTriggerCombo thread yesterday.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,649
    Vote Rating
    60
      0  

    Default

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

    And the fix is the last post.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  10. #10
    Sencha User
    Join Date
    Jun 2010
    Location
    Indonesia
    Posts
    77
    Vote Rating
    0
      0  

    Default

    thanks for ur fast reply..

    is that possible to create in ext 2.3 ?
    Thanks
    _pipiet_

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •