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
– Paweł Głowacz, Commented Aug 22, 2015 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 creates new components so not fit to your purpose. — Greendrake
– Greendrake, Commented Aug 23, 2015 at 1:26
Specifying ids within component classes is extremely bad idea. ids 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
– Greendrake, Commented Aug 23, 2015 at 2: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
– Sergey Bogdanov, Commented Aug 23, 2015 at 11:52
Pawel, you can find a good explanation in this answer: stackoverflow.com/questions/14492179/… — Sergey Bogdanov
– Sergey Bogdanov, Commented Aug 23, 2015 at 12:49

Tarabass · Accepted Answer · 2015-08-23 11:44:19Z

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, 2015 at 11:44

answered Aug 23, 2015 at 10:51

Tarabass

3,1462 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sergey Bogdanov Over a year ago

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() ?

Tarabass Over a year ago

I have no idea. See this fiddle where it just works fine: fiddle.sencha.com/#fiddle/smf

Guilherme Lopes · Accepted Answer · 2015-08-23 06:00:12Z

1

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);
    }
});

answered Aug 23, 2015 at 6:00

Guilherme Lopes

4,7601 gold badge23 silver badges45 bronze badges

1 Comment

Sergey Bogdanov Over a year ago

Guilherme, thank you and sorry, i should include these last strings in my snippet.

Collectives™ on Stack Overflow

ExtJs: cannot show field in form

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related