ExtJs: cannot show field in form

Question

I'm building an MVC application in ExtJs 4.2 and there is a window and a formpanel.

Form panel has few hidden textfields which i want to show/hide.

When I run this commands:

Ext.getCmp('PartsSell').show();

or

Ext.getCmp('PartsSell').setVisible(true);

even

Ext.widget('ObjectForm').getForm().findField('PartsSell').setVisible(true);

nothing is happening!!

Here is formpanel snippet:

Ext.define('crm.view.ObjectForm', {
    extend      : 'Ext.form.Panel',
    header      : false,
    alias       : 'widget.ObjectForm',
    url         : 'action.php',
    id          : "ObjectForm",
    defaultType : 'textfield',
    initComponent: function() {
        Ext.apply(this, {
            items   : [
            {
                            fieldLabel  : 'label',
                            labelWidth  : 115,
                            hidden      : true,
                            allowBlank  : true,
                            name        : 'PartsSell',
                            itemId      : 'PartsSell',
                            xtype       : 'textfield',
                            vtype       : 'DigitsVtype',
                            width       : 150,
                            padding     : '0 0 0 15'
            },
            /* other stuff */]
        } );
        this.callParent(arguments);
    }
} );

FF/chrome console behaves like everything is OK.

If i set 'hidden' param to 'false' the field is shown.

According to Tarabass and Drake advices: I've changed id on itemId.

And now i can trigger field by

Ext.ComponentQuery.query('#PartsSell')[0].hide() / .show();

why are you wrapping this with `initComponent` and `Ext.apply` ? — Paweł Głowacz, Aug 22 '15 at 22:53
Make sure that you have only one component with `id` "PartsSell" (you might be calling `show` not on the one you are looking at). Also note that [`Ext.widget`](https://docs.sencha.com/extjs/4.2.3/#!/api/Ext-method-widget) **creates new** components so not fit to your purpose. — Greendrake, Aug 23 '15 at 01:26
Specifying `id`s within component *classes* is extremely bad idea. `id`s must be unique, and classes are supposed to be instantiated multiple times, so you already create the potential of `id` collision. If you have called `Ext.widget('ObjectForm')` at least twice you definitely have it. — Greendrake, Aug 23 '15 at 02:12
Drake, you're right, i'll rewrite `id` on `itemId` but field 'PartsSell' is **absolutely** unque, and `Ext.widget('ObjectForm')` is used only once, so the problem lies elsewhere...any thoughts? — Sergey Bogdanov, Aug 23 '15 at 11:52
Pawel, you can find a good explanation in this answer: http://stackoverflow.com/questions/14492179/to-initcomponent-or-not-to-initcomponent — Sergey Bogdanov, Aug 23 '15 at 12:49

score 1 · Answer 1 · answered Aug 23 '15 at 06:00

When you override default methods, you need to run a callParent().

Ext.define('crm.view.ObjectForm', {
    extend: 'Ext.form.Panel',
    width: 300,
    height: 300,
    header: false,
    alias: 'widget.ObjectForm',
    url: 'action.php',
    id: 'ObjectForm',
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                fieldLabel: 'label',
                labelWidth: 115,
                //hidden      : true,
                allowBlank: true,
                name: 'PartsSell',
                id: 'PartsSell',
                xtype: 'textfield',
                vtype: 'DigitsVtype',
                width: 150,
                padding: '0 0 0 15'
            }]
        });
        this.callParent(arguments);
    }
});

Guilherme, thank you and sorry, i should include these last strings in my snippet. — Sergey Bogdanov, Aug 23 '15 at 12:42

Tarabass · Accepted Answer · 2015-08-23T11:44:19.963

1

Change id: 'PartsSell' to itemId: 'PartsSell'.
Select the component by using the selector '#PartsSell'.
Then set hidden to false using the method setHidden(false) (generated by the config system).

Something like:
Ext.ComponentQuery.query('#PartsSell')[0].setHidden(false);

edited Aug 23 '15 at 11:44

answered Aug 23 '15 at 10:51

Tarabass

3,132
2
17
35

Thanks man! but setHidden doesn't work (i cant understand why?) so I used show/hide. And could you explain in brief why i can't work with this field by `id` with `Ext.getCmp() `? – Sergey Bogdanov Aug 23 '15 at 12:58
I have no idea. See this fiddle where it just works fine: https://fiddle.sencha.com/#fiddle/smf – Tarabass Aug 23 '15 at 16:09

ExtJs: cannot show field in form

2 Answers2