Search code examples
extjsextjs4

How to view or generate a selector string for any Ext JS component?


I am trying to come up with a selector string for a component. It would really be handy if there was a method that would just give this to me. Something like this:

Ext.ComponentQuery.getSelector(component)

That would return me the fully qualified selector string for that component such that

Ext.ComponentQuery.query(Ext.ComponentQuery.getSelector(component)) === component

I have not yet found a library method to obtain selector strings from component objects.

Edit: The question is not super awesome. Say you have a reference Ext JS component (button, field, etc...) nested deep in a hierarchy of containers, panels, grids, toolbars, which were all dynamically (programatically generated in an app) There is a likely an algorithm to generate a selector for that component up the ancestors of the component. So using the parent objects the component up the line back to the root object of the entire application viewport. I understand there is more than one way to select a specific component with the expressive syntax, I don't care about all the ways, just any way.


Solution

  • In ExtJs framework does not exists method which returns component selector.

    However you can get id of component which have to be unique in your whole application and then use it in the selector. Each component implement getId() method which returns auto-generated unique id or id which you define in config when you create component.

    var id = component.getId();
    

    Then you can get component by its id:

    Ext.getCmp(id);
    

    or by id selector:

    Ext.ComponentQuery.query('#' + id)[0];