1. #1
    Ext User
    Join Date
    Oct 2009
    Posts
    2
    Vote Rating
    0
    lysy is on a distinguished road

      0  

    Default Unanswered: JQuery val/text equivalent

    Unanswered: JQuery val/text equivalent


    Hi!

    I'm looking for an JQuery equivalent of:

    $('input:first').val() // getting value from selected element
    $('#photos').text() // getting text from selected element

    I walk trough Ext Core Manual but probably I miss this information

    Please excuse my poor English.
    Best regards,
    Ɓukasz

  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


    Anything wrong with using DOM methods directly?

  3. #3
    Ext User
    Join Date
    Oct 2009
    Posts
    2
    Vote Rating
    0
    lysy is on a distinguished road

      0  

    Default


    DOM methods are fine for me. I'm just starting to learn Ext and because I'm familiar only with JQuery I was trying to find something similar. So, for input elements setting/getting value should be done with:

    Ext.fly('myinput').dom.value
    Ext.fly('myinput').dom.value = 'xxxxx'

    But what about text nodes? In DOM tree I found two properties:

    Ext.fly('foo').dom.innerHTML
    Ext.fly('foo').dom.textContent

    and both works for me (setting & getting). Is there any difference between those two?

    Thanks for your hint with DOM methods!

  4. #4
    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

      1  

    Default


    As a web developer, you should be intimately familiar with the standards to which the Ecmascript (Javascript) DOM implementations aspire: http://www.w3.org/TR/DOM-Level-2-Cor...t-binding.html

    jQuery brings down the level of expertise required. Resig may think that's a good thing. I think it's a bad thing. People need to serve their apprenticeship and learn the true structure of a web application, and its interactions with the DOM. That document should be your first point of reference at all times, before a jQuery book.

    There are subtle differences between the two approaches you give.

    innerHTML returns the HTML code within an Element.

    textContent (which is non-standard BTW) returns the data values of all the text nodes within that element (See the above document's "Object CharacterData" section)

    If it is just a single text node that you have, then treat it as a CharacterData object, and use the appropriate standards-based property.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Answers
    1
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      1  

    Default


    Quote Originally Posted by lysy View Post
    But what about text nodes? In DOM tree I found two properties:

    Ext.fly('foo').dom.innerHTML
    Ext.fly('foo').dom.textContent

    and both works for me (setting & getting). Is there any difference between those two?
    In HTML documents there is no difference (use of innerHTML is preferred), but in XML documents some browsers use textContent and some innerText. So, for XML nodes you should use:
    Code:
    var value = node.textContent || node.innerText;

  6. #6
    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


    Here's some extensions to Ext core's CompositeElement class (which is what encapsulates selected elements)

    Code:
    Ext.override(Ext.CompositeElementLite, (function(){
    
        var selType = /select-(one|multiple)/i,
            trailSpace = /\s*$/;
            
        function getInputValue(el) {
            var i, l, e, one, v, result, st;
    
            if (el.tagName == 'OPTION') {
                return (el.attributes.value || {}).specified ? el.value : el.text;
            }
            if(st = selType.exec(el.type)){
                if (st[1] == 'one') {
                    for (i = 0, l = el.options.length; i < l; i++) {
                        if ((e = el.options[i]).selected) {
                            return getInputValue(e);
                        }
                    }
                } else {
                    return new Ext.CompositeElementLite(el.options).val();
                }
            }
            return el.value;
        }
        
        function getTextValue(el) {
            return (el.nodeType == 3)
                ? el.data.replace(trailSpace, '')
                : new Ext.CompositeElementLite(el.childNodes).text();
        }
        
        function setTextValue(el, t) {
            while (el.hasChildNodes()) {
                el.removeChild(el.lastChild);
            }
            el.appendChild(el.ownerDocument.createTextNode(t));
        }
    
        return {
    //      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;
            },
    
            val: function() {
                var me = this, i, l = me.elements.length, result;
                if (l == 1) {
                    return getInputValue(me.elements[0]);
                }
                for (result = [], i = 0; i < l; i++) {
                    result.push(getInputValue(me.elements[i]));
                }
                return result;
            },
        
            text: function(t) {
                var me = this, i, l = me.elements.length, v, el, result;
                if (l == 1) {
                    el = me.elements[0];
                    if (t !== undefined) setTextValue(el, t);
                    return getTextValue(el);
                }
                for (result = [], i = 0; i < l; i++) {
                    el = me.elements[i];
                    if (t !== undefined) setTextValue(el, t);
                    if (v = getTextValue(el)) {
                        result.push(v);
                    }
                }
                return result.join(' ');
            },
        
            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;
            }
        };
    })());
    So you can do eg:

    Code:
    Ext.getBody().select("input").val()
    As with all free code YMMV, not forgetting TANSTAAFL.

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    mscalora is on a distinguished road

      0  

    Default Is there any reason....

    Is there any reason....


    Is there any reason to prefer

    Code:
     
        function setTextValue(el, t) {
            while (el.hasChildNodes()) {
                el.removeChild(el.lastChild);
            }
            el.appendChild(el.ownerDocument.createTextNode(t));
        }
    over

    Code:
     
        function setTextValue(el, t) {
            el.innerHTML = Ext.String.htmlEncode(t);
        }
    which looks a lot cleaner but I suspect Ext.String.htmlEncode is implemented something like:

    Code:
      
        function encodeHtml(t) {
            var el = document.createElement("span");
            el.appendChild(document.createTextNode(t));
            return el.innerHTML;
        }
    so how about:

    Code:
     
        function setTextValue(el, t) {
            el.innerHTML = "";
            el.appendChild(el.ownerDocument.createTextNode(t));
        }
    and let the loop happen in native code.

    -Mike

Thread Participants: 3