[SOLVED] How to prepend string to displayfield?

[Dustin Graham]

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

I see/found an example on append.



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



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


Fail

Or...



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');
newI.appendChild(newT);
newP.appendChild(newI);
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

Cheers.
-Dustin

[Animal]

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

[Dustin Graham]

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.

[Animal]

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.0/docs/?class=Ext.Component&member=autoEl

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]

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