Wraps the specified element with a special 9 element markup/CSS block that renders by default as
a gray container with a gradient background, rounded corners and a 4-way shadow.

This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
{@link Ext.panel.Panel} when {@link Ext.panel.Panel#frame frame=true}, {@link Ext.window.Window}).
The markup is of this form:

Ext.dom.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

Example usage:

// Basic box wrap
Ext.get("foo").boxWrap();

// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addCls("x-box-blue");

@param {String} [class='x-box'] A base CSS class to apply to the containing wrapper element.
Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
so if you supply an alternate base class, make sure you also supply all of the necessary rules.
@return {Ext.dom.Element} The outermost wrapping element of the created box structure.
function(cls) {
        cls = cls || Ext.baseCSSPrefix + 'box';
        var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(Element.boxMarkup, cls) + "</div>"));
        Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
        return el;
    }