View Full Version : unable to clone items with Ext.clone()

Kevin Shaw
26 Oct 2011, 7:55 AM
hi all,

I'm using Ext 4.0.2 a

I am currently trying to create a component ("multipleitems"), that allows me to add more instances of "something" in an already rendered form. (see Example)

Ext.create('Ext.form.Panel', {
title: 'Multiple Items Test',
renderTo: Ext.getBody(),
items: [{
items: [{

Ext.define('MySpace.ux.MultipleItems', {
extend: 'Ext.container.Container',
alias: 'widget.multipleitems',

initComponent: function() {
var me = this,
leClone = Ext.clone(me.items.items);

//add the add-button
xtype: 'button',
text: 'add another one',
handler: function(){
//a new container to hold the cloned content and the remove-button
var leContainer = Ext.create(Ext.container.Container, {

xtype: 'button',
text: 'remove me',
handler: function(){
//add the cloned items to the new container
//insert the new container above the add-button
me.insert(me.items.items.length-1, leContainer);
The output is a form with a textfield, a numberfield and an "add button".
A click on the "add button" should result in:
two textfields, two numberfields and the "add button".

My Problem right now is that the clone function doesn't seem to work the way i hoped it to.
Could someone explain to me how the clone function is intended to work and/or what i am doing wrong?

Thanks in advance

Kevin Shaw
31 Oct 2011, 12:59 AM
I still couldn't find a solution to my problem. I studied the clone function and have a more specific question now.
Can anyone explain to me what the statement highlighted in red does?

clone: function(item) {
if (item === null || item === undefined) {
return item;

// DOM nodes
// TODO proxy this to Ext.Element.clone to handle automatic id attribute changing // recursively
if (item.nodeType && item.cloneNode) {
return item.cloneNode(true);
var type = toString.call(item);

// Date
if (type === '[object Date]') {
return new Date(item.getTime());

var i, j, k, clone, key;

// Array
if (type === '[object Array]') {,
i = item.length;
clone = [];
while (i--) {
clone[i] = Ext.clone(item[i]);
// Object
else if (type === '[object Object]' && item.constructor === Object) {
clone = {};
for (key in item) {
clone[key] = Ext.clone(item[key]);
if (enumerables) {
for (j = enumerables.length; j--;) {
k = enumerables[j];
clone[k] = item[k];
return clone || item; },
In my understanding it checks if item.constructor (which is a function!?) equals Object (which is an Object!?)

1 Nov 2011, 6:56 AM
In my understanding it checks if item.constructor (which is a function!?) equals Object (which is an Object!?)

Not quite. Object is a function. Consider the following:

var obj = new Object();

This is equivalent to:

var obj = {};

It seems to be a check that the item being cloned is an anonymous object, like those in the two examples above. Something like a textfield would fail this check.