CODEWITHSUNDEEP
javascriptdomextjsclone
RyanP13
RyanP13

Reputation: 7743

Ext JS 4 - cloning a node and append elsewhere in the DOM

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.

Upvotes: 0

Views: 1373

Answers (1)

chinabuffet
chinabuffet

Reputation: 5578

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);

});​

Upvotes: 2

Related Questions