howto get formpanel and disable selectfields with Sencha Touch 2

Question

Iam trying to disable some selectfields when the app starts up. My main Nav is a tabpanel and I have a settings form here:

{
                    xtype: 'formpanel',
                    title: 'Einstellungen',
                    iconCls: 'settings',
                    cls: [
                        'settingsPanel'
                    ],
                    id: 'settingsPanel',
                    ui: 'light',
                    layout: {
                        type: 'vbox'
                    },
                    scrollable: false,
                    items: [
                        {
                            xtype: 'selectfield',
                            border: '',
                            cls: [
                                'name1'
                            ],
                            id: 'name1',
                            labelAlign: 'top',
                            autoCapitalize: false,
                            autoComplete: false,
                            placeHolder: '1. Name eingeben',
                            displayField: 'name',
                            store: 'settingsStore',
                            valueField: 'name'
                        }

Now in the controllers init function I try this:

var form = Ext.ComponentQuery.query('formpanel');
form.getAt(0).disable();
form.getAt(1).disable();
form.getAt(2).disable();

But I get:

Uncaught TypeError: Object [object Object] has no method 'getAt'

How can I get the form inside the controller and disable the selectfields? Is this maybe a scope problem?

Thanks!

Answer 1

I have worked on your problem and resolved it. Below are the two codes:-

main Nav.js

    {
        xtype: 'fieldset',
        id: 'abc', // give a unique 'id' to your fieldset
        items: [
                {
                    xtype: 'selectfield',
                    border: '',
                    cls: [
                        'name1'
                    ],
                    id: 'name1',
                    labelAlign: 'top',
                    autoCapitalize: false,
                    autoComplete: false,
                    placeHolder: '1. Name eingeben',
                    displayField: 'name',
                    store: 'settingsStore',
                    valueField: 'name'
                }
           ]
    }

controller.js

      launch: function () {
                console.log("launch");
                var form = Ext.getCmp('abc'); // calling fieldset with 'id'
                console.log('Fetching fieldset...');
                form.getAt(0).disable();
            }

Hope this helps.