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 - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,853
    Vote Rating
    908
      0  

    Default

    Look at the source for TwinTriggerField, there's no "triggerClass".
    Evan Trimboli
    Twitter - @evantrimboli

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    54
      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 geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

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

    Default

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

    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    54
      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 geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  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,626
    Vote Rating
    54
      0  

    Default

    Do a forum search for TwinTriggerCombo

    Someone even posteda fix on the TwinTriggerCombo thread yesterday.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

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

    Default

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

    And the fix is the last post.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  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
  •