PDA

View Full Version : jQuery equivalent



Dig4Fire
15 Aug 2009, 7:26 AM
Hello,

How to write this jQuery-Code in Ext?


$('a').filter(function() {
return this.hostname != location.hostname;
}).addClass('external');
Thank you in advance

Animal
15 Aug 2009, 8:17 AM
First off, what does it do?

Animal
15 Aug 2009, 8:41 AM
OK, a bit of digging reveals a lacuna in Ext's CompositeElement abilities. A filter function which filters by a passed function is an obvious need.

You need to add at the top of your page



// Add a filter function to CompositeElement (Why it not there already?)
Ext.override(Ext.CompositeElementLite, {
filter : function(fn){
var els = [];
this.each(function(el){
if(fn(el.dom)){
els[els.length] = el.dom;
}
});
this.elements = [];
this.add(els);
return this;
}
});


Then you would do



Ext.select("a").filter(function(a) {
return a.hostname != location.hostname
}).addClass("external");

Dig4Fire
15 Aug 2009, 8:44 AM
Thank you but "this.fill is not a function..."

Animal
15 Aug 2009, 9:00 AM
A more Exty way to do it is to add a psdueo-class selection function to DomQuery. This would be like the :nth-child pseudo class, so you would add to the top of your page.



// Ext's DOM query aparatus allows definition of new pseudo classes.
Ext.DomQuery.pseudos.external = function(c, v){
var r = [], ri = -1;
for(var i = 0, ci; ci = c[i]; i++){
if(ci.hostname != location.hostname){
r[++ri] = ci;
}
}
return r;
};


And then the simple and obvious code:



Ext.select("a:external").addClass("external");


There are always several ways to skin a cat in Ext!

Dig4Fire
15 Aug 2009, 9:12 AM
Quote from "Learning jQuery 1.3":

"...Also the .filter() method in particular had enormous power because it can take a function as it argument. The function allows us to create complex tests for whether elements should be kept in the matched set. Let's suppose, for example, we want to add a class to all external links..."

Is there no simple equivalent in Ext?

Animal
15 Aug 2009, 11:37 AM
Have you been reading my replies? You can use the pseudo.

I just updated the code in post #3 code for the filter function to adjust for the absence of the fill method.

Animal
15 Aug 2009, 11:41 AM
Quote from "Learning jQuery 1.3":

"...Also the .filter() method in particular had enormous power because it can take a function as it argument. The function allows us to create complex tests for whether elements should be kept in the matched set. Let's suppose, for example, we want to add a class to all external links..."

Is there no simple equivalent in Ext?

I do always hate those overblown, expansive and exaggerated books, don't you?

Dig4Fire
15 Aug 2009, 12:02 PM
Thanks for your replies!

evant
15 Aug 2009, 6:27 PM
I was doing some stuff with Core the other day, the filter() method should definitely be there.

And it will be in the next build ;)

evant
15 Aug 2009, 6:37 PM
Another way to do it without filter:



Ext.select('a').each(function(el){
if(el.dom.hostName != location.hostName){
el.addClass('external');
}
});

Animal
15 Aug 2009, 11:29 PM
In its current form where it filters using a string selector as the parameter, or will it be upgraded to accept a selection function in addition?

Dig4Fire
16 Aug 2009, 1:58 AM
What about this jQuery-Code?

$('td:contains(Henry)').nextAll().andSelf().addClass('highlight'); Highlight all of the cells following the one containing Henry (include the one that contains Henry)

Animal
16 Aug 2009, 2:25 AM
Are you porting something to Ext Core?

evant
16 Aug 2009, 2:30 AM
Something like:



var el = Ext.select('td:contains(Henry)').item(0);
while(el){
el = el.addClass('highlight').next();
}

Animal
16 Aug 2009, 2:43 AM
I'm thinking about the possiblity of an override statement which adds come of these obscure capabilities. Pretty easy to add them. CompositeElement just encapsulates a set of DOM elements.

Dig4Fire
16 Aug 2009, 3:04 AM
Are you porting something to Ext Core?
No, only compare the libraries. Not sure which one I should use. (Sorry for my bad english)

Animal
16 Aug 2009, 3:16 AM
Like this:



Ext.override(Ext.CompositeElementLite, {

// need this until next release - pulled in from full Ext
fill : function(els){
var me = this;

// Keep reference to last version of self before refill
me.prevObject = new me.constructor(me.elements);

me.elements = [];
me.add(els);
return me;
},

nextAll: function() {
var els = this.elements, i, l = els.length, n, r = [], ri = -1;
for (i = 0; i < l; i++) {
for (n = els[i].nextSibling; n; n = n.nextSibling) {
r[++ri] = n;
}
}
this.fill(r);
return this;
},

andSelf: function() {
if (this.prevObject) {
this.add(this.prevObject.elements); // add takes an Array. Should it take another Composite???
}
return this;
}
});


Then you would use



Ext.select('td:contains(Altria)').nextAll().andSelf().addClass('x-grid3-dirty-cell');


(As tested on the array-grid example in ExtJs examples as you can tell by the data)

Dig4Fire
16 Aug 2009, 5:52 AM
Instructive code, thx

evant
16 Aug 2009, 6:03 AM
A filter method that accepts a function would be good. I'm playing around with some code now:



Ext.onReady(function(){
for(var i = 0; i < 10; ++i){
Ext.getBody().createChild({
tag: 'div',
cls: i % 2 == 0 ? 'foo' : 'bar'
});
}
console.log(Ext.select('div').filter('.foo').getCount());
console.log(Ext.select('div').filter(function(el){
return el.is('.foo');
}).getCount());
});


Obvoiusly both return the same results.

steffenk
16 Aug 2009, 9:03 AM
btw - i really like the $(), so this can be done also:
var $ = Ext.select;

Why isn't that used in ExtJS? Many newcomers know that from the other libraries.

Animal
16 Aug 2009, 12:42 PM
A filter method that accepts a function would be good. I'm playing around with some code now:



Ext.onReady(function(){
for(var i = 0; i < 10; ++i){
Ext.getBody().createChild({
tag: 'div',
cls: i % 2 == 0 ? 'foo' : 'bar'
});
}
console.log(Ext.select('div').filter('.foo').getCount());
console.log(Ext.select('div').filter(function(el){
return el.is('.foo');
}).getCount());
});


Obvoiusly both return the same results.

That's good. What about maintaining functional parity with jQuery with those other things? nextAll and andSelf were pretty easy to add in. If there are any others, they could go in too.

I also think the ability to add pseudos should be highlighted in the "textual" Core Manual.

The following is an intuitive way of selecting external links:



Ext.select("a:external");

Dig4Fire
20 Aug 2009, 9:48 AM
$('body').removeClass();How to remove all classes from body (for example) in Ext?

TommyMaintz
20 Aug 2009, 1:16 PM
$('body').removeClass();How to remove all classes from body (for example) in Ext?

document.body.className = '';
For some things you just dont need a library hehe. Please lets not forget we are still doing Javascript development, and doing things as trivial as this should really be straightforward for any developer using javascript.

Dig4Fire
30 Aug 2009, 10:36 AM
$(document).ready(function() {
$('#switcher').click(function(event) {
if (!$(event.target).is('.button')) {
$('#switcher .button').toggleClass('hidden');
}
});

$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').unbind('click');
});
});
How to remove (unbind) the event handler in Ext?

This code doesn't work:

Ext.select('#switcher').un('click', this.handlerFn);

TommyMaintz
30 Aug 2009, 12:02 PM
Ext.onReady(function() {
var handlerFn = function(ev) {
if (!ev.getTarget('.button')) {
Ext.select('.button', 'switcher').toggleClass('hidden');
}
}

Ext.fly('switcher').on('click', handlerFn);

Ext.select('#switcher-narrow, #switcher-large').on('click', function() {
Ext.fly('switcher').un('click', handlerFn);
});
});

Dig4Fire
31 Aug 2009, 4:28 AM
Thank you. What about Event Namespacing to manage specific event handlers?

$(document).ready(function() {
$('#switcher').bind('click.collapse', function(event) {
if (!$(event.target).is('.button')) {
$('#switcher .button').toggleClass('hidden');
}
});

$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').unbind('click.collapse');
});
});

Animal
31 Aug 2009, 11:47 AM
What does using an event name like "click.collapse" mean?

jnicora
31 Aug 2009, 2:16 PM
jQuery uses event namespaces to filter bindings. Event namespaces work like this: ("type.namespace"). This link explains it: http://www.learningjquery.com/2007/09/namespace-your-events

I haven't personally had a situation where this functionality is useful.

Dig4Fire
31 Aug 2009, 11:12 PM
The .collapse suffix is invisible to the event handling system. The addition of the namespace means that you can unbind just this handler. Event namespacing is especially handy in the creation of plugins.

Animal
31 Aug 2009, 11:54 PM
In Ext, you unbind the handler by requesting that the handler be removed.

I can't help feeling that this thread is a bit of a wind up (perhaps the username is the clue!). I mean this information is right there in the API docs.

addListener (on) has an exact opposite, removeListener (un)

jnicora
1 Sep 2009, 8:07 AM
@Dig4Fire: instead of using a kludgy system like event namespaces, I would suggest just passing in the handler reference used to bind the event in the first place, this will ensure you are unbinding only the handlers you want.



Ext.select('.class').on('click', fnRefOne); // bind function one
Ext.select('.class').on('click', fnRefTwo); // bind function two
// now we only want to unbind function one, easy
Ext.select('.class').un('click', fnRefOne);

jnicora
30 Sep 2009, 5:48 PM
since core is now my go-to library for all lite website projects, I've started a ux library. so far i have a Lava Lamp control (jQuery equiv: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/)

http://fuisti.com/ext-core/core-ux/LavaLamp/
also implemented it here:
http://labflo.com/

i have 4 more controls on the way (Accordion, Dock, SlideDisplay (think Coda) and Tab)

Animal
30 Sep 2009, 11:40 PM
Gloopy! :))

Very nice work!

Dig4Fire
1 Oct 2009, 3:49 AM
since core is now my go-to library for all lite website projects, I've started a ux library. so far i have a Lava Lamp control (jQuery equiv)...
Nice plugin. Accordion would be great too.

hello2008
8 Dec 2009, 6:20 PM
since core is now my go-to library for all lite website projects, I've started a ux library. so far i have a Lava Lamp control (jQuery equiv: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/)

http://fuisti.com/ext-core/core-ux/LavaLamp/
also implemented it here:
http://labflo.com/

i have 4 more controls on the way (Accordion, Dock, SlideDisplay (think Coda) and Tab)

nice ux, could you please release a zip file, maybe in a new thread? :D

helloniko
25 Jan 2010, 9:37 PM
For MorphList, I have a similar one based on Ext Core, example here (play with ExtJS website navigation bar) (http://cz9908.com/blog/Niko-weblog-labs/lab-ExtJS/for-example/Ext-ux-MorphList/ext-morphlist-using-config-options.html)



so far i have a Lava Lamp control (jQuery equiv: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/)

http://fuisti.com/ext-core/core-ux/LavaLamp/

Robert Lai
24 Mar 2010, 5:00 PM
extjs core is great.

hello2008
27 Mar 2010, 9:32 AM
extjs core is great.

I agree with you, Ext Core is a wonderful gift from official team, it's lightweight, clear codes, MIT license ...

Everything is good but one thing should be mentioned is that few community involved lead to make much of this project uncompetitive.

abe.elias
27 Mar 2010, 1:17 PM
if the community can come up with a list of very cool website type ux's the core team will create them.

reang
15 Apr 2010, 7:25 PM
Am I able to apply the grid with EXt Core?