PDA

View Full Version : again a scope problem in handler



steffenk
6 Aug 2009, 1:56 AM
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?


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(picker, date){
console.info(element); // I need a reference to element
},
//scope: this
});

datepicker.on('click', function(){
menu.show(datepicker, "tr-br");
});

});
}

Animal
6 Aug 2009, 2:03 AM
You are converting fields to DatePicker yourself?

Doesn't applyTo work?

steffenk
6 Aug 2009, 2:07 AM
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.

Animal
6 Aug 2009, 2:08 AM
Only styling problems?

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

steffenk
6 Aug 2009, 2:12 AM
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.

Animal
6 Aug 2009, 2:15 AM
Well, just poke a reference to the element into one of the objects you create.

steffenk
6 Aug 2009, 2:52 AM
thanks animal, that did the trick. Not nice, but works:


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(picker, date){
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");
});

});
}

Animal
6 Aug 2009, 2:53 AM
eval???? what's that all about?

Animal
6 Aug 2009, 2:58 AM
Wy not do what I suggested?




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");
});

});
}

steffenk
6 Aug 2009, 2:58 AM
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 :)

steffenk
6 Aug 2009, 3:01 AM
works, and is the cleaner solution, thanks again!

steffenk
6 Aug 2009, 3:46 AM
there was an error with IE (who else? :) )

relElement.setValue(date.format(format));

i had to change to

relElement.value = date.format(format);