View Full Version : [SOLVED] How to prepend string to displayfield?

Dustin Graham
30 Sep 2009, 10:37 AM
Basically, I am wondering how to prepend a message to a displayfield.

I see/found an example on append.


It would be nice to have displayField.prepend('<p>Sweet</p>');

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

displayField.el.dom.insertBefore('<p>Test</p>', displayField.el.dom.firstChild);



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

newP = document.createElement('p');
newI = document.createElement('i');
newT = document.createTextNode('test');
displayField.el.dom.insertBefore(newP, displayField.el.dom.firstChild);

But, it was nasty, so I thought maybe the DOM Helper could help

So I tried

newP = {tag: 'p', children: [{ tag: 'i', html: 'test' }] }
Ext.DomHelper.insertBefore(newP, displayField.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...

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. :D


30 Sep 2009, 10:48 AM
displayField.el.insertFirst({tag: 'p', cn: { tag: 'i', html: 'Yay!'}});

Dustin Graham
30 Sep 2009, 5:50 PM
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.

30 Sep 2009, 9:19 PM
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.


The Panel Component allows you to override the structure of its constituent elements: http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Panel&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.

Dustin Graham
30 Sep 2009, 9:35 PM
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.