ExtJs: cannot show field in form

1
votes

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

2
javascriptextjs
why are you wrapping this with initComponent and Ext.apply ? – Paweł Głowacz
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
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
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
Pawel, you can find a good explanation in this answer: stackoverflow.com/questions/14492179/… – Sergey Bogdanov

2 Answers

1
votes

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

1
votes

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