Question

I am trying to clone a <thead> element in Ext JS and append it to another location in the DOM.

I have this fiddle set up as an example:

http://jsfiddle.net/DUnWy/3/

Being new to the framework i am struggling a bit with the basics and cannot see why this code is not functioning for me.

Answer 1

The Ext.select method returns an instance of an Ext.CompositeElement, which follows the Composite Pattern, meaning that it is an object that encapsulates multiple elements of the same type. To access the first table header DOM element from an Ext.select you’d have to do something like:

Ext.select('.data-grid thead').first().dom

I’m not exactly sure why the Ext.DomHelper.append isn’t working, but the following code works:

Ext.onReady(function() {

    var hdr = Ext.select('.data-grid thead').first().dom,
        cntr = Ext.select('.clone table').first().dom,
        clone = Ext.clone(hdr);

    cntr.appendChild(clone);

});​