wrap the contents of an element

[knagurski]

With the ideas of progressive enhancement, often I find it necessary to wrap the contents of a tag with another tag. In other words, I wanted to do the following transformation:
<h2>Heading</h2>
<h2><span>Heading</span></h2>
Jack provides a great way of wrapping a tag but it really didn't fit my needs, so I made my own little addition to Ext.

Add the following to your JS and you should be good to go.
Ext.Element.prototype.wrapContents = function ( dhConfig, returnDom ) {
dhConfig.html = this.dom.innerHTML;
return Ext.DomHelper.overwrite( this.dom, dhConfig, !returnDom );
};
Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, "wrapContents");
To wrap the contents of an element you can use one of the following
//using a flyweight element
Ext.fly( 'myDiv' ).wrapContents( { tag: 'span' } );

//using a standard element
Ext.get( 'myDiv' ).wrapContents( { tag: 'span' } );

//using a CompositeElement to wrap contents of all h2 tags with a span
Ext.select( 'h2' ).wrapContents( { tag: 'span' } );
There are two arguments that can be passed, the first is a DomHelper object (ommiting the html attribute), the second is whether to return a DOM reference to the new tag, or an Ext Element.

I hope someone else finds this useful. :)

BTW, thanks to Animal for helping me get the function to work with CompositeElements :)

[galdaka]

Hi,

This solution not work for 3.0 RC2.

Any solution?

Greetings,

[Animal]

http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Element&member=wrap

And that actually wraps the original Element instead of deleting the element and creating a looky-likey using innerHTML!

[Animal]

If you just want to wrap the existing child nodes in a different tag...


Ext.Element.prototype.changeTag = function (dhConfig, returnDom) {

// Collect all child nodes to re-add them to the new element
var oldDom, df = document.createDocumentFragment();
Ext.each(this.dom.childNodes, function(n) {
df.appendChild(n);
});

this.dom = DH.insertBefore(oldDom = this.dom, config || {tag: "div"});
oldDom.remove();
this.dom.id = oldDom.id;
this.dom.appendChild(df);
return returnDom ? this.dom : this
};
Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, "changeTag");

[galdaka]

Thanks Animal!!


I need this transformaction:


<h2>
<div1>Heading</div1>
<div2>fksdjfhkjsdh</div2>
</h2>

To

<h2>
<span>
<div1>Heading</div1>
<div2>fksdjfhkjsdh</div2>
</h2>
<span>
</h2>


wrapContent addon not work in 3.0 RC2?

I have <h2> element. With wrapContent is easy:

el.wrapContent({tag: 'span'})

But not works!! :s

Is changeTag the best option?

Greetings,

[Animal]

Try


Ext.Element.prototype.wrapContent = function (dhConfig, returnDom) {

// Collect all child nodes to re-add them to the new element
var df = document.createDocumentFragment();
Ext.each(this.dom.childNodes, function(n) {
df.appendChild(n);
});

var newEl = this.insertFirst(config || {tag: "div"});
newEl.dom.appendChild(df);
return returnDom ? newEl : Ext.get(newEl);
};
Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, "wrapContent");


BTW "not work" won't wash. This is off the cuff code just to gove you a start point. You take it from here.

[galdaka]

Try


Ext.Element.prototype.wrapContent = function (dhConfig, returnDom) {

// Collect all child nodes to re-add them to the new element
var df = document.createDocumentFragment();
Ext.each(this.dom.childNodes, function(n) {
df.appendChild(n);
});

var newEl = this.insertFirst(config || {tag: "div"});
newEl.dom.appendChild(df);
return returnDom ? newEl : Ext.get(newEl);
};
Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, "wrapContent");


BTW "not work" won't wash. This is off the cuff code just to gove you a start point. You take it from here.

Thanks Animal,

Ext.CompositeElement.createCall

Not exits! I replace with:


Ext.CompositeElement.createCallback


But I have a error in "fitToSize" function (ext-all.debug.js) in ContainerLayout.

I will continue trying tomorrow.

Thanks for your help!!

[galdaka]

This work for me:


Ext.Element.prototype.wrapContent = function (dhConfig, returnDom) {
dhConfig.html = this.dom.innerHTML;
this.dom.innerHTML = '';
var newEl = Ext.DomHelper.overwrite(this.dom, dhConfig);
return returnDom ? newEl : Ext.get(newEl);
};
Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, "wrapContent");


Greetings,

[Animal]

That's fine unless some Javascript Component has a reference to any of the child elements. Because if so, they're all broken.