Results 1 to 6 of 6

Thread: Question about duplicate id's

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    175

    Default Question about duplicate id's

    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?
    Last edited by Bleak; 15 Jun 2010 at 9:10 AM. Reason: Why is everything centered....

  2. #2
    Sencha User
    Join Date
    Jul 2007
    Location
    Sterling, VA USA
    Posts
    46

    Default

    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.
    Scope = Perspective (think like an object)

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Location
    Sterling, VA USA
    Posts
    46
    Scope = Perspective (think like an object)

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    175

    Default

    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.

  5. #5
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638

    Thumbs up

    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:
    Code:
        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
    Code:
        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:
    Code:
    // 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:
    Code:
    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.
    Code:
    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.

  6. #6

    Default

    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.

Similar Threads

  1. Duplicate call to JS
    By praveena1978 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2009, 1:44 AM
  2. [Duplicate] TableFormLayout
    By durlabh in forum Ext 2.x: User Extensions and Plugins
    Replies: 0
    Last Post: 30 Jun 2008, 11:24 AM
  3. No Duplicate Bug
    By ojintoad in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 6 Sep 2007, 5:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •