Warning saying `Id` exist and should be destroyed

Question

Most of the time i see the following Warning, when i click on the same button for more than once (when calling the same function twice or more)

[WARN] [WARN][Ext.Component#constructor] Registering a component with a id (`name`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.

How should i destroy it as the Warning suggest ? or how should i fix this ?

UPDATE

function onPersonFound(imageData) {
           var image = Ext.create('Ext.Img', {
                                 src: "data:image/jpeg;base64," + imageData,
                                 id: 'logo',
                                 width: 372,
                                 height: 140
                                 });

Answer 1

[WARN][Ext.Component#constructor] Registering a component with a id (name) which has already been used. Please ensure the existing component has been destroyed (Ext.Component#destroy().

Warning states that you are creating and destroying the component with id:name too fast. So, I would suggest you to remove the hard-coded id property on that component and instead use itemId.

Why to use itemId over id?

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container - avoiding potential conflicts with Ext.ComponentManager which requires a unique id.

Answer 2

According to your controller function, this is because at the first time you clicked on your button, Sencha Touch creates an Ext.Image with id logo. At the second time, another image with id logo is created, so there are 2 components with the same id. It leads to wrong query results if they base on id property.

Just simply be more "specific" in your id config when you create any components to ensure there're no components with same id at anytime. For example:

function onPersonFound(imageData) {
           var image = Ext.create('Ext.Img', {
                                 src: "data:image/jpeg;base64," + imageData,
                                 id: 'logo' + person_id,
                                 width: 372,
                                 height: 140
                                 });

Note: I wroteperson_id to represent an unique field of your instance that ensures there're no images with same id. Wish it helps you.