Extjs 4. location.hash without explicit ids

Question

In my panel I have a navigation tree. On itemclick window scrolls down to a particular form field. I do it like this:

location.hash = 'UID'

So, I can get the element by Ext.getCmp(UID). But I know, that this practice of using ids is not good, because of possible layout crashes. So, I now want to use itemId instead of id, but the problem is how to simulate the same behaviour as of location.hash.

Answer 1

Once you have container of the element and the element itself then call:

element.scrollIntoView(container, ...);

See Element Docs for details.

Answer 2

Just because you don't define an ID, this doesn't mean that the element has no ID. ExtJS creates unique IDs automatically.

A good OO design should give the references you need. ExtJS does this in I would say 99.9%.

Example: An itemclick event, has a parameter this. Which can be the window, panel, button, or whatever.

itemclick( myElement, record, item, index, e, eOpts ) {
    ...
    location.hash = myElement.id;
    ...        
}

If you have one Ext.Component but you want a parent or child component of this element, you should use up() and down() method. This is still faster as Ext.getCmp() because you don't need to search the whole DOM.

 myButton.up(); //get parent
 myButton.up("toolbar") //tries to find a parent with xtype "toolbar"
 myButton.down("textfield"); //you get it... 

Answer 3

You can get the item with the following command:

Ext.ComponentQuery.query('[itemId=' + UID + ']')[0];