1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    41
    Vote Rating
    0
    Dig4Fire is on a distinguished road

      0  

    Default Unanswered: jQuery equivalent

    Unanswered: jQuery equivalent


    Hello,

    How to write this jQuery-Code in Ext?
    PHP Code:
        $('a').filter(function() {
            return 
    this.hostname != location.hostname;
        }).
    addClass('external'); 
    Thank you in advance

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Answers
    13
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    First off, what does it do?

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Answers
    13
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

    Code:
    // 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

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

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    41
    Vote Rating
    0
    Dig4Fire is on a distinguished road

      0  

    Default


    Thank you but "this.fill is not a function..."

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Answers
    13
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

    Code:
    // 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:

    Code:
    Ext.select("a:external").addClass("external");
    There are always several ways to skin a cat in Ext!

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Posts
    41
    Vote Rating
    0
    Dig4Fire is on a distinguished road

      0  

    Default


    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?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Answers
    13
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Answers
    13
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by Dig4Fire View Post
    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?

  9. #9
    Sencha User
    Join Date
    Aug 2009
    Posts
    41
    Vote Rating
    0
    Dig4Fire is on a distinguished road

      0  

    Default


    Thanks for your replies!

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,917
    Answers
    458
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!