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

Thread: again a scope problem in handler

  1. #1
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default again a scope problem in handler

    Hi,

    as you see i insert DatePicker to existing HTML form.
    What i don't get is a reference to the element in the each-block. I need to set value to element, but the handler is out of scope. I'm not in a class, so setting scope to this doesn't help. Is there a way to get it work?

    PHP Code:
    function convertDateFieldsToDatePicker() {
        var 
    dateFields Ext.select("*[id^=tceforms-datefield-], *[id^=tceforms-datetimefield-]");
        
    dateFields.each(function(element) {
            var 
    onChangeCode element.dom.attributes.onchange.value;
            if (
    element.dom.id.match(/tceforms-datefield-/)) {
                var 
    format 'j-n-Y';
            } else {
                var 
    format 'G:i j-n-Y';
            }
            
            var 
    datepicker Ext.DomHelper.insertAfter(element, {
                
    tag'img',
                
    src'gfx/datepicker.gif',
                
    width:    16,
                
    height:    16,
                
    style'cursor:pointer;vertical-align:middle;'
            
    }, true);
            
            var 
    menu = new Ext.menu.DateMenu({
                
    handler: function(pickerdate){
                    
    console.info(element); // I need a reference to element
                
    },
                
    //scope: this
            
    });
            
            
    datepicker.on('click', function(){
                
    menu.show(datepicker"tr-br");
            });
            
        });

    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You are converting fields to DatePicker yourself?

    Doesn't applyTo work?

  3. #3
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    Hi Animal,

    i converted the textfields to real datepickers before, but i ran into styling problems. So i choosed this way where i don't change any markup except adding a picker icon.

    this works fine, but now i don't find the element in handler, applyTo doesn't change anything in this context.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Only styling problems?

    Isn't that easy to fix with a little CSS as opposed to doing all that DOM manipulation yourself?

  5. #5
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    believe me, i needed hours by trying adjust the css. I had to remove the x-styles all manually, the picker icon with position absolute behaved different in Safari/IE etc. so i gave up in the end.
    This way here would be the best for my situation.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Well, just poke a reference to the element into one of the objects you create.

  7. #7
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    thanks animal, that did the trick. Not nice, but works:

    PHP Code:
    function convertDateFieldsToDatePicker() {
        var 
    dateFields Ext.select("*[id^=tceforms-datefield-], *[id^=tceforms-datetimefield-]");
        
    dateFields.each(function(element) {
            var 
    datepicker Ext.DomHelper.insertAfter(element, {
                
    tag'img',
                
    src'gfx/datepicker.gif',
                
    width:    16,
                
    height:    16,
                
    style'cursor:pointer;vertical-align:middle;'
                
            
    }, true);
            
            var 
    menu = new Ext.menu.DateMenu({
                
    id'p' element.dom.id,
                
    handler: function(pickerdate){
                    var 
    relElement Ext.getDom(picker.id.substring(1));
                    if (
    relElement.id.match(/tceforms-datefield-/)) {
                        var 
    format 'j-n-Y';
                    } else {
                        var 
    format 'G:i j-n-Y';
                    }
                    
    relElement.setValue(date.format(format));
                    eval(
    relElement.attributes.onchange.value);
                },
            });
            
            
    datepicker.on('click', function(){
                
    menu.show(datepicker"tr-br");
            });
            
        });

    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    eval???? what's that all about?

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Wy not do what I suggested?

    Code:
    function convertDateFieldsToDatePicker() {
        var dateFields = Ext.select("*[id^=tceforms-datefield-], *[id^=tceforms-datetimefield-]");
        dateFields.each(function(element) {
            var datepicker = Ext.DomHelper.insertAfter(element, {
                tag: 'img',
                src: 'gfx/datepicker.gif',
                width:    16,
                height:    16,
                style: 'cursor:pointer;vertical-align:middle;'
                
            }, true);
            
            var menu = new Ext.menu.DateMenu({
                targetEl: element,
                handler: function(menu, date){
                    var relElement = menu.targetEl;
                    if (relElement.id.match(/tceforms-datefield-/)) {
                        var format = 'j-n-Y';
                    } else {
                        var format = 'G:i j-n-Y';
                    }
                    relElement.setValue(date.format(format));
                    if (Ext.isFunction(relElement.onchange)) {
                        relElement.onchange.call(relElement);
                    }
                },
            });
            
            datepicker.on('click', function(){
                menu.show(datepicker, "tr-br");
            });
            
        });
    }

  10. #10
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    the original dom has a call to own script in onchange. Setting the value to the field doesn't fire the onchange, so i force it with eval. Do you have a better idea?

    edit: just the second you suggest
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

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
  •