How to query all ExtJS components which have some config option set

Question

I've specified showCondition custom property for some items inside view config. How can I query all such components?

I've tried Ext.ComponentQuery.query(). The problem is, that query() returns to me correct number of elements, but there are not 'real' components, that is, when I try to do elements[0].hide(), is makes no effect.

I noticed, that when I get the same element using ref in controller class, hide() works perfectly.

After that I've console.log-ed results of both ways of getting the element and noticed strange things. First, returned element have different html id attributes (textfield-1115 and textfield-1089). Second, the element which is returned by query() method already has hidden=true property (that's why hide() has no effect). Both elements are textfield components.

Below are related code parts. The important is in onAfterRenderForm().

In view:

Ext.define('MyApp.view.Test', {
    extend: 'Ext.container.Container',
    alias: 'widget.test',

    layout: 'fit',

    initComponent: function() {
        Ext.apply(this, {
            items: [
                {
                    title: 'form',
                    itemId: 'myForm',
                    xtype: 'form',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'code',
                            showCondition: 'is-root',
                            allowBlank: false,
                            vtype: 'alphanum'
                        }
                    ]
                }
            ]
        });
        this.callParent(arguments);
    }
});

In controller:

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',

    requires: [
        'MyApp.view.Test'
    ],

    refs: [
        {
            ref: 'codeField', selector: '[showCondition]'
        }
    ],

    init: function() {
        this.control(
            {
                '#myForm': {
                    afterrender: this.onAfterRenderForm
                }
        );
    },

    onAfterRenderForm: function(oForm) {
        var elements = oForm.query('[showCondition]');
        console.log(elements[0]);
        console.log(this.getCodeField());
        if(elements[0].id == this.getCodeField().id)
            alert('Elements are not the same!!!');
    }
});

Note that you might want to be using [?showCondition] if the attribute wont be inherited, but may be falsey, as the ? uses hasOwnProperty as opposed to casting to bool. — Will S

wantok wantok · Accepted Answer · 2013-03-16T17:41:48

This:

refs: [{
    ref: 'codeField', selector: '[showCondition']
}]

is subtly different from oForm.query('[showCondition]')[0].

For the ref you a grabbing the first component found with a defined showCondition value. In oForm.query, you are grabbing the first component found that is a child of oForm which has a defined showCondition value.

That means that if you have other fields in any view within your app that have showCondition defined on them, the call to the generated getter for the ref could return any one of those fields. It depends on what order Ext decides to put them in.

It sounds to me like a couple things are happening

You have other fields in your app that have showCondition defined but are not on the form your controller is looking at.
Your view is being rendered in the hidden state. Is is being added as an item in a card layout or something like that?

How to query all ExtJS components which have some config option set

1 Answers