View Full Version : Question about duplicate id's

15 Jun 2010, 9:08 AM
I have created a widget class that renders a simple user interface, with the idea that there could be many instances of it.

The challenge I have, is that the even though each instance has a unique component and id for that component, I have given proper ID's to some of the sub elements such as panels, trees, buttons, etc. This is necessary so I can reference these elements and handle events, updates, etc.

However, if I hide()/show() the component, the sub elements get mixed up between them as if it doesn't understand what the parent component is.

I can't see having to generate unique ID's for each and every element on the component, just wouldn't be very clean.

Is there something I am missing, or is simply having elements on the UI with the same id just not going to work?

15 Jun 2010, 9:14 AM
Always use Unique IDs. If you don't, you WILL end up with unexpected results. Most likely, you're running into scope issues. I'm assuming you're probably overusing Ext.getCmp() to access Components instead of referencing properly through Object Scope. Post some code so we can show you how to properly access parents/children.

15 Jun 2010, 9:16 AM
Check out the article on scope: http://www.sencha.com/learn/Tutorial:What_is_that_Scope_all_about

15 Jun 2010, 9:25 AM
I'll check out your links, but I updated to use unqiue id's through Ext.id(), and maintained the ref:'' attribute for a look up. I don't use any Ext.get() or Ext.getCmp(), everything was being accessed through this.component.[element].

It works properly now, but definitely through me for a loop. If I run into any further issues, I'll put up some code.

15 Jun 2010, 9:35 AM
A good question. Most folks like myself got caught by specifying the "id", and saw the undesirable results of specifying the id. Personally, I don't specify the id anymore, and I just let EXT JS, I mean Sencha, do of that id generation for me.

In order to properly access the component that you want, you will have to employ alternative techniques other than Ext.getCmp(). Some of these techniques are not the best ones.

In your listener, the first parameter is usually the component's caller, specified by sending in "this". For a button handler:

handler: function (button, event) {
var panel = button.findParentByType("panel"); // the xtype
var owner = button.ownerCt;

This is going up the chain, but how about going down the chain.

In a panel that contains

activate: function (panel) {
var component = panel.items.itemAt(0);
var compArr = panel.find("itemId", "special-panel"); It will find all components with the property of itemId: "special-panel"

In an extended class that you create, you can specify properties within the class that provide reference to your components:

// within the constructor or initComponent or onReady
this.map = new Ext.ux.GMapPanel({<config>});

Then you can either create a method or you can call it directly:

getMapPanel: function () {
return this.map;

addGeometry: function (geometry) {
var map = this.map;
var myMap = this.getMapPanel();
// map === myMap

Finally, within an extended class, if you are creating a listener for some other object, you can specify the scope to "this", and then you can call the "scope" methods and properties within the extended class.

this.grid = new Ext.grid.GridPanel({<config>});
this.grid.on("rowclick", function (grid, index, event) {
var map = this.getMapPanel();
// instead of:
var anotherMapReference = grid.ownerCt.items.itemsAt(4); // Some relative reference
}, this);

Hope this helps.

Mike Robinson
15 Jun 2010, 1:18 PM
Every record in the Store must have a unique identifier (a "primary key").

This identifier is not "part of the data record." You should never use a primary key value as anything other than a handle to the record. Never reveal it to anyone. It's not a "part number" or anything else of the sort.