Results 1 to 5 of 5

Thread: [SOLVED] How to prepend string to displayfield?

  1. #1

    Default [SOLVED] How to prepend string to displayfield?

    Basically, I am wondering how to prepend a message to a displayfield.

    I see/found an example on append.

    PHP Code:
    displayField.append('<p>Something</p>'); 
    It would be nice to have displayField.prepend('<p>Sweet</p>');

    But, I tried various combinations of displayField.el.dom...

    PHP Code:
    displayField.el.dom.insertBefore('<p>Test</p>'displayField.el.dom.firstChild); 
    Fail

    Or...

    PHP Code:
    displayField.el.dom.insertBefore(document.createElement('p'), displayField.el.dom.firstChild); 
    Failt... no wait... Success! But wait, it's just a <p> tag... no text.

    Eventually I fugred something out that works...
    PHP Code:
    newP document.createElement('p');
    newI document.createElement('i');
    newT document.createTextNode('test');
    newI.appendChild(newT);
    newP.appendChild(newI);
    displayField.el.dom.insertBefore(newPdisplayField.el.dom.firstChild); 
    But, it was nasty, so I thought maybe the DOM Helper could help

    So I tried
    PHP Code:
    newP = {tag'p'children: [{ tag'i'html'test' }] }
    Ext.DomHelper.insertBefore(newPdisplayField.el.dom.firstChild); 
    Still fail...

    Finally after a lot of testing, crashing, testing, crashing... reading the docs, googling a little on DOM insert/append/create... reading the docs some more.

    Once I figured it out, it seems SOO easy and I feel pretty dumb. But, because I spent over 30 minutes trying to get this to work, I figure it would be nice to post this in case someone googles exactly what I googled... "How to prepend string to displayfield?" they might just find this post and save themselves 30 minutes.

    Here's the final solution that works pretty nicely...

    PHP Code:
    Ext.DomHelper.insertHtml('afterBegin'displayField.el.dom'<p><i>Yay!</i></p>'); 
    *Sigh* and this is the simple stuff. At least I got the complicated stuff done already.

    Cheers.
    -Dustin

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Code:
    displayField.el.insertFirst({tag: 'p', cn: { tag: 'i', html: 'Yay!'}});

  3. #3

    Default

    Ah! Excellent. Makes sense. I thought the DOM Helper was integrated with the components some how. Thanks for the example.

    Helps me understand ExtJS just a little bit more. Loving it every step of the way.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Be careful with concepts like "components".

    Components (Note the capital letter indicating a class name) are integrated with DomHelper through the autoEl config which allow specification of how to create their DOM structure if the actual class does not already have a defined structure. You should not modify the DOM structure of Components without some knowledge about the consequences of that.

    http://www.extjs.com/deploy/ext-3.0....&member=autoEl

    The Panel Component allows you to override the structure of its constituent elements: http://www.extjs.com/deploy/ext-3.0....member=bodyCfg

    The Ext.Element DOM wrapping class is well integrated with DomHelper and has many methods which use DomHelper to add and insert new content.

  5. #5

    Default

    Man. So much documentation to read. I've gone over the autoEl and bodyCfg a couple times. But, I always absorb more each time I look. Thanks again Animal.

    -Dustin

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •