EXTJS: two window having objects with same id

Question

When I create two window objects containing single textfield object in each window. But Id of that text field is same. When I re-size, maximize or minimize window object, controls move from one window to another. Please have a look on the following code and re-size first window titled : 'window 1'

Ext.onReady(function(){

var win = new Ext.Window({
    title : 'window 1',
    width:200,
    height:200,
    maximizable : true,
    x : 50,
    items: [{xtype : 'textfield', id: 'text1'}] 
});

win.show(this);

var win2 = new Ext.Window({
    title : 'window 2',
    width:200,
    height:200,
    maximizable : true,

    x : 350,
    items: [{xtype : 'textfield', id: 'text1'}]

});

win2.show(this);

});

Answer 1

As for HTML, each id must be unique. Otherwise, you will have stranges behaviour.

Indeed, the Ext.get method has a cache, based on the element id.

So the real question is : why do you set the same id to the text fields ?

If you need a known id, you can use :

tId = Ext.id(); // generates an id
items: [{xtype : 'textfield', id: tId}]

Or to access the textfield element / component later, you can use ref or itemId : http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component