PDA

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)

<body>
<script>
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
title: 'Multiple Items Test',
renderTo: Ext.getBody(),
items: [{
xtype:'multipleitems',
items: [{
xtype:'textfield',
fieldLabel:'MyText'
},{
xtype:'numberfield',
fieldLabel:'MyNumber',
decimalPrecision:0
}]
}]
});
});
</script>
</body>


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

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

//add the add-button
me.add({
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, {

items:[{
xtype: 'button',
text: 'remove me',
handler: function(){
me.remove(leContainer);
}
}]
});
//add the cloned items to the new container
leContainer.add(leClone);
//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

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!?)

skirtle
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.