Question

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.

Answer 1

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.