CODEWITHSUNDEEP
extjsextjs4
fourgablesguy
fourgablesguy

Reputation: 469

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.

Upvotes: 1

Views: 614

Answers (2)

Evan Trimboli
Evan Trimboli

Reputation: 30082

No such method exists. It's like asking "Is there a method to get the CSS selector for an element?". The answer is no, because you can select an element in a number of different ways.

To give a few examples, you can grab a component via:

  • An id #foo
  • An xtype toolbar
  • A hierarchy selector panel > container
  • An attribute [action=foo]

Or any combination of the above.

Upvotes: 4

Akatum
Akatum

Reputation: 4016

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];

Upvotes: 2

Related Questions