Develop Reference

ExtJS 6.7 Modern - Ext.grid.Tree selectOnExpander doesnt work on node load

I'm using ExtJS 6.7 Modern toolkit and Ext.grid.Tree.selectOnExpander = false does not work properly when data for expandable node is loading from a remote server, i.e. node is selected when I click on the expander.
I expect that in this case the node will NOT be selected as in the case when the data is already loaded.
Check this fiddle as an illustration - try to expand node when it is loaded and when it is not loaded yet using expander.
So far I've tried to check fired events with Ext.util.Observable.capture and it seems like extra childtap event is triggired. I don't yet understand why. Seems like a bug for me.

Seems they forgot to implement the logic.
From the code I would sugget to use this snippet.
It extens the logic from Ext.dataview.List using the same style.
Sencha Fiddle: Fiddle
Ext.define('Portal.grid.Tree', {
override: 'Ext.grid.Tree',
shouldSelectItem: function(e) {
var me = this,
no = !me.callParent([e]),
cmp;
if (!no && !me.selectOnExpander) {
cmp = e.getTarget();
no = cmp.classList.contains('x-expander-el');
}
return !no;
}
});

The best solution I have found so far is to override Ext.grid.Tree onChildTap method (inherited from Ext.dataview.Abstract) like this:
Ext.define('Portal.grid.Tree', {
override: 'Ext.grid.Tree',
/** Override Ext.dataview.Abstract onChildTap method for correct processing selectOnExpander property **/
onChildTap: function(location) {
if (this.getSelectOnExpander() || location.event.target !== location.cell.expanderElement.dom) {
this.callParent(arguments);
}
},
});

trying to map someFunction.jQuery to "$"

I found a function (via this person's github) that I might use in my script that mimics the functionality of an API object.
Here's the relevant code from the link:
unsafeWindow = (function() {
var e1 = document.createElement('p')
e1.setAttribute('onclick', 'return window;');
return e1.onclick();
})();
Where the poster says you can use the function in the format unsafeWindow.jQuery
Now, I want to be able to use $ instead of the jQuery keyword elsewhere in my code. I tried learning from this stack overflow question to simplify it and re-wrote the code like so:
(function($){
var e1 = document.createElement('p')
e1.setAttribute('onclick', 'return window;');
return e1.onclick();
})(jQuery);
But it didn't work. I guess I could just try something like $ = unsafeWindow.jQuery in order to map to the $, but I wanted to try to do it in the format seen above.

You would map $ to unsafeWindow.jQuery like so:
unsafeWindow = ( function () {
var dummyElem = document.createElement('p');
dummyElem.setAttribute ('onclick', 'return window;');
return dummyElem.onclick ();
} ) ();
var $ = unsafeWindow.jQuery;
// Now you can use the page's jQuery. EG:
$("body").append ('<p>Content added by unsafeWindow.jQuery</p>');
But keep in mind:
This is a Hack, and it will probably stop working around Chrome version 28.
It may still fail due to a race condition about when userscripts fire. To fix that, add // #run-at document-end to the userscript's metadata block.
Don't do things this way! It will only cause grief, side effects and maintenance headaches.
For userscripts: use this technique (best cross-browser)  or  this technique (relies on page's jQuery, but the example shows how to use GM_ functions too).
For full extensions or content scripts:, use this technique (use the manifest.json and keep everything properly sandboxed).

jQuery Transit: Object none has no method 'setFromString'

I have loaded in jQuery transit, and I made sure I did it after loading jQuery, but I still get this error:
I have looked at the resources panel in Chrome, and jQuery transit is being loaded after jQuery. It has also loaded correctly, and shows up with no problems.
I have also tested in the console, testing the examples on the website. They all return this same error.
here is my code:
$("#current-employers a.industry-company-link").click(function (e)
{
e.preventDefault();
var url = $(this).attr("href");
var company_container = $("#current-company-profile");
company_container.load(url);
company_container.transition({
y: ($(this).offset().top - company_container.offset().top)
});
console.log("container offset: " + company_container.offset().top + "\nURL offset: " + $(this).offset().top);
});
And the scripts I bring in:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>
Thanks for any help.

Well, turns out it's jQuery's fault in this case. jQuery 1.8 was the culprit here. Loading in 1.7.2 fixed the problem. I will report this bug to the transit and jQuery team.

UPDATE (April 13, 2013): I was reading through the source code for Transit and it appears that Mr. Cruz has updated the code to work effectively with jQuery 1.8+. If someone has tested it, could they please confirm that it works. Thanks.
This is related to the css hook that jQuery and Transit use. In version 1.7, jQuery didn't have a css hook for transforms. So Transit implemented a hook for us. However, jQuery updated itself and now offers css hooks for transforms. These now conflict with each other. However it is not a bug as jQuery is working fine and as such, it does not need to be reported to jQuery.
Your choices are to use a 1.7 version of jQuery and wait until Transit is updated or edit the Transit code which only takes about a minute.
To edit, get the development version of Transit from the official site. Then go to line 603 where it says $.cssHooks[prop]. Remove the method and place this method there instead:
$.cssHooks[prop] = {
get: function(elem) {
var t = $(elem).css('transform');
if (!t || t === "none") {
t = new Transform();
}
return t.get(prop);
},
set: function(elem, value) {
var t = $(elem).css('transform');
if (!t || t === "none") {
t = new Transform();
}
t.setFromString(prop, value);
$(elem).css({ transform: t });
}
};
You can minify the code at one of the hundreds of compressors available, such as http://jscompress.com/

'Date' is undefined in IE9 in javascript loaded by FacePile

I'm currently getting an error within Facebook's FacePile code, and I'm baffled by the cause.
facepile.php loads a script which, among other things, has these lines (when pretty-printed):
...
o = document.createElement('script');
o.src = l[n];
o.async = true;
o.onload = h;
o.onreadystatechange = function() {
if (o.readyState in c) {
h();
o.onreadystatechange = null;
}
};
d++;
a.appendChild(o);
...
(a == document.body, d++ is irrelevant here)
This code loads a script with src = http://static.ak.fbcdn.net/rsrc.php/v1/yW/r/pmR8u_Z_9_0.js or something equally cryptic (the filename changes occasionally).
In that script, there are these lines at the very top (also when pretty-printed):
/*1331654128,176820664*/
if (window.CavalryLogger) {
CavalryLogger.start_js(["\/8f24"]);
}
window.__DEV__ = window.__DEV__ || 0;
if (!window.skipDomainLower && document.domain.toLowerCase().match(/(^|\.)facebook\..*/))
document.domain = window.location.hostname.replace(/^.*(facebook\..*)$/i, '$1');
function bagofholding() {
}
function bagof(a) {
return function() {
return a;
};
}
if (!Date.now)
Date.now = function now() {
return new Date().getTime();
};
if (!Array.isArray)
Array.isArray = function(a) {
return Object.prototype.toString.call(a) == '[object Array]';
};
...
And I'm getting an error which says "SCRIPT5009: 'Date' is undefined", right at the if (!Date.now) portion. Debugging near that point reveals that Date, Array, Object, Function, etc are all undefined.
Er... how? window exists, as does document (though document.body is null) and a handful of others, but plenty of pre-defined objects aren't. Earlier versions of IE don't seem to have this problem, nor do any other browsers, but multiple machines running IE9 (including a clean VM) all have the same issue.
I doubt I can do anything about it, but I'm very curious how this is happening / what the underlying problem is. Does anyone know, or can they point me to something that might help?
-- edit:
Prior to posting this question, I had found this site: http://www.guypo.com/technical/ies-premature-execution-problem/
While it seemed (and still does) like it might be the source of the problem, I can't replicate it under any smaller circumstances. All combinations I've tried still have Date, etc defined ; which isn't too surprising, as otherwise I'm sure others would be seeing many more problems with IE.

If you step through with a javascript debugger at the first point any JS gets run. At the same time add a watch for Date/Array etc. and note when it goes to null. Might be slow and laborious but I can't see why it wouldn't work.

You may want to try adding the script in a document.ready function. In other words, insure that the FB script is processed only after the DOM is ready. But, based on the link you give to Guy's Pod (great article, by the way), it seems you're right in the assertion that IE is downloading and executing the script pre-maturely (hence my suggestion to add a wrapper so that it only executes after the DOM ready event). IE9 is probably sandboxing the executing script (outside the document/window scope).

mootools or javascript : what does $tmp stand for or what does it pertain too

I'm currently working on the Tips.js from mootools library and my code breaks on the line that has those el.$tmp, and console says it's undefined
Can anybody help me?

in 1.11 (haven't checked in 1.2+) $tmp is a reference to the element itself, created and used internally by the garbage collector:
var Garbage = {
elements: [],
collect: function(el){
if (!el.$tmp){
Garbage.elements.push(el);
el.$tmp = {'opacity': 1};
}
return el;
},
trash: function(elements){
for (var i = 0, j = elements.length, el; i < j; i++){
if (!(el = elements[i]) || !el.$tmp) continue;
if (el.$events) el.fireEvent('trash').removeEvents();
for (var p in el.$tmp) el.$tmp[p] = null;
for (var d in Element.prototype) el[d] = null;
Garbage.elements[Garbage.elements.indexOf(el)] = null;
el.htmlElement = el.$tmp = el = null;
}
Garbage.elements.remove(null);
},
empty: function(){
Garbage.collect(window);
Garbage.collect(document);
Garbage.trash(Garbage.elements);
}
};
the lines el.$tmp = {'opacity': 1}; (in collect method above) and el.htmlElement = el.$tmp = el = null; (in trash method above) are the only places in the source where this property is assigned that i could find, although it's called by various other methods, such as Element.setOpacity and Element.getStyle (specifically, only to return opacity value), as well as methods in the Tips class
1.2 might not have this issue, but in any case, hope that helps and sorry i couldn't help more

I'd suggest taking your question and posting it, along with a link to the page to either/or/and:
http://mooforum.net
http://groups.google.com/group/mootools-users/topics
That's the community that swarms with it.
Now as for answering it here - I'd need a lot more information (code example?)

Hmmm. I'm not exactly sure what el.$tmp is a reference to in MooTools but a message stating "console is undefined" is probably because someone was trying to log to the Firebug (or another) console and that object does not exist if you don't have Firebug and friends.
If you don't have http://getfirebug.com'>Firebug installed for Firefox then you might give it a shot. See if you can find the console statement and remove it. Also, if you aren't using Firefox, you can use Firebug Lite in IE, Safari, or Opera.