CODEWITHSUNDEEP
extjsextjs4
Esteban A. Maringolo
Esteban A. Maringolo

Reputation: 1218

ComponentQuery selector for child elements only

I have a set of Controller/View that are composed dynamically, each one have a "selector" list and a "container", such container can have another selector+container pair, and so on. Which are instances of the same root selector+container Controller.

This is the heading definition of the Controller (the abstract class):

Ext.define('MyApp.controller.explorer.Base', {
    extend: 'Ext.app.Controller',
    refs: [
        {ref: 'explorerContainer', selector: '[itemId="explorerContainer]'},
        {ref: 'explorerSelector', selector: '[itemId="explorerSelector]'}
    ],

The thing is I don't know what should be the ComponentQuery selector to match only the child elements of my controller with such itemId. Because by using [itemId="explorerContainer"] to match the component it does so globally, answering the top-most container in the composition tree.

In previous experiments I did with ExtJS 3 I accessed child elements by means of myComponent.getComponent('...'), but now there's no getComponent() and I could'n find an equivalent in ExtJS 4.

Thanks in advance.

Upvotes: 1

Views: 19920

Answers (3)

btk
btk

Reputation: 3225

You can just do component.query('selector') to query the subtree starting at your component.

Upvotes: 1

dbrin
dbrin

Reputation: 15673

You are mixing a bit controllers with views in your question. For example "child elements of my controller". The controller is not a component - just an observer of events. Views have children components, etc.

You need to get a little bit more familiar with Ext.ComponentQuery class. You can experiment with it in Firebug on your app or demo pages. You just pop open firebug console and type Ext.ComponentQuery.query('panel') - then replace panel with whatever you think is the right expression and test it out. If you install Illuminations For Developers plugin - you will get Ext components back instead of generic JS objects - this is tremendously helpful.

Docs have some examples of queries: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery . You'll find the ">" symbol restricts query to immediate children.

Hope this helps. If not post some more of your code and we can help you create some selectors.

Upvotes: 7

Esteban A. Maringolo
Esteban A. Maringolo

Reputation: 1218

Reading Ext.ComponentQuery documentation I found this at the bottom of it:

"For easy access to queries based from a particular Container see the Ext.container.Container.query, Ext.container.Container.down and Ext.container.Container.child methods. Also see Ext.Component.up."

So Ext.container.ContainerView (xtype: container) implements child([selector]), which answer the first child element matching the selector string argument.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Container-method-child

It does exactly what I was looking for.

Upvotes: 0

Related Questions