Hybrid View

  1. #1
    Ext User al_capone's Avatar
    Join Date
    Jun 2007
    Location
    Slovakia, Kosice
    Posts
    17
    Vote Rating
    0
    al_capone is on a distinguished road

      0  

    Question DateField onChange event only on lost focus?

    DateField onChange event only on lost focus?


    I added Ext.form.DateField component into toolbar. When I click on DateField Trigger button and select DateValue from DatePicker, selected value is added into input field. This is OK. But
    change event is called only after clicking outside Datefield. It is there event or other way how update my grid automatically when date value from DatePicker is added to DateField component? Thanks

    PHP Code:
    var dateFrom = new Ext.form.DateField({
            
    id'dateFrom',
            
    width80,
            
    valuetodayDate,
            
    selectOnFocusfalse,
            
    readOnlytrue,
            
    allowBlankfalse
        
    });
        
    dateFrom.on('change'getFilteredValues);

        function 
    renderDate(value){
            return 
    value.dateFormat('d.m.Y');
        }   

        function 
    getFilteredValues() {
          
    ds.on('beforeload', function() {
            
    ds.baseParams = { 
                
    filterDateFromrenderDate(dateFrom.getValue())
            };
          });
          
    ds.load({params:{start:0limit:myPageSize}});
        } 
    Jaroslav Javorsky

  2. #2
    Sencha User
    Join Date
    Apr 2007
    Location
    Ottawa, Canada
    Posts
    174
    Vote Rating
    1
    ffzhuang will become famous soon enough

      0  

    Default same problem for me

    same problem for me


    Hi, al_capone:

    I have the same problem. Jack had suggestion something like this:

    Ext.form.DateField.prototype.menuListeners.show = function(){
    this.onFocus();
    }

    However, this event only fired before date is pickup.

    Anyone suggestion will be really appreciated.

    Regards!

    Fenqiang Zhuang

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    13
    Vote Rating
    0
    mrogers is on a distinguished road

      0  

    Default


    If you are trying to get the event of a user selecting a date on the calendar, this is the way:

    Code:
    Ext.form.DateField.prototype.menuListeners.hide = function(){
    //do whatever here, like this.onBlur();
    };
    Use it with the .show event to see if the value has changed.

  4. #4
    Ext User al_capone's Avatar
    Join Date
    Jun 2007
    Location
    Slovakia, Kosice
    Posts
    17
    Vote Rating
    0
    al_capone is on a distinguished road

      0  

    Default


    mrogers,

    thanks your code works fine
    when i was waiting for some answer to my question i coded something like this:
    it looks like DateField component


    PHP Code:
    var todayDate = new Date();
    var 
    fromDate = new Date();
    var 
    toDate = new Date();

    var 
    dateMenuFrom = new Ext.menu.DateMenu({
            
    handler : function(dpdate){
                if (
    date>toDate) {
                    
    Ext.Msg.alert('Bad date''Date "FROM" must be less than date "TO".');
                } else {
                    
    fromDate date;
                    
    buttonDateFrom.setText(renderDate(fromDate));
                    
    getFilteredValues();
                }
            }
        });

    var 
    buttonDateFrom = new Ext.Toolbar.Button({
            
    id'buttonDateFrom',
            
    cls'x-btn-text-icon',
            
    iconiconPath 'silk/icons/date_previous.png',
            
    textrenderDate(todayDate),
            
    menudateMenuFrom
        
    });


    var 
    tb = new Ext.Toolbar(gridHead);
    tb.addField(buttonDateFrom); 
    Jaroslav Javorsky

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    24
    Vote Rating
    0
    wck555 is on a distinguished road

      0  

    Default


    This pointed me in the right direction but had a few minor problems: "hide" is called even when the user presses "ESC" to close the date picker without picking a date. In addition this solution replaces the original hide function in datefield which appears to have some important code in it. My solution is still a bit of a hack since it could be invalidated by a change in Ext. But for now it works.

    Add this code to your project
    Code:
    Ext.form.DateField.prototype.menuListeners.select = function(m,d)
    {
        this.setValue(d);                 // write date user selected into the text box
        this.fireEvent('dateselect');   // fire dateselect event
    }
    Then subscribe to the "dateselect" event of your datefield control(s) to receive notification when the user picks date:
    Code:
    myDateControl.on('dateselect', onChangeDate, this);
    Quote Originally Posted by mrogers View Post
    If you are trying to get the event of a user selecting a date on the calendar, this is the way:

    Code:
    Ext.form.DateField.prototype.menuListeners.hide = function(){
    //do whatever here, like this.onBlur();
    };
    Use it with the .show event to see if the value has changed.

  6. #6
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    1
    mickh is on a distinguished road

      1  

    Default Use 'select', not 'change'

    Use 'select', not 'change'


    I know this is an old thread, but I hit this problem today and realised what I was doing wrong, and so figured I'd report it here in case it helps others in the future.

    So, I hit the problem that a DateField embedded in a toolbar was only firing the 'change' event when focus moved away from the DateField.

    The solution was to use the 'select' event instead. It fires as soon as a date is selected. So, I now have:

    Code:
            new Ext.form.DateField({
                readOnly: true,
                listeners: {
                    'select' : {
                        fn: function(field, date) {
                            // ... do something useful here ...
                        }
                    }
                }
            });
    cheers,
    mick

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar