ExtJS 5.0.1 Show grid based on combobox selection

Question

Looking for some assistance on showing/hiding a form container element based on a combobox selection.

I only want the grid (id: NspList) to show if and only if "NSP Provider" is selected in the combobox (id: carrierConnectivity). Does anyone have any ideas how this can be accomplished? Code snippet below:

                  {
                    xtype: 'container',
                    layout: 'vbox',
                    style: { paddingRight: '10px', paddingBottom: '10px' },
                    items: [{
                            xtype: 'combobox',
                            labelAlign: 'top',
                            fieldLabel: 'Connectivity Type',
                            id: 'carrierConnectivity',
                            name: 'connectivity_type',
                            store:['GRE', 'GRE - with internet peering', 'MPLS', 'Direct Leased Line', 'NSP Partner'],
                            width: 250,

                        },
                        {
                            id: 'NspList',
                            flex: 1,
                            xtype: 'grid',
                            minHeight: 200,
                            maxHeight: 300,
                            width: 250,
                            selType: 'rowmodel',
                            title: 'NSP Providers',
                            forceFit: true,
                            bind: { store: '{nspnames}' },
                            plugins: [
                                Ext.create('Ext.grid.plugin.CellEditing', {
                                    clicksToEdit: 2
                                })
                            ],
                            columns: {
                                defaults: {
                                    editor: 'textfield'
                                },
                                items: [
                                    { text: 'Name', dataIndex: 'name'}
                                ]
                            },
                            tools: [
                                {type: 'plus', handler: 'addNsp'},
                                {type: 'minus', handler: 'removeNsp'}
                            ]
                        }

                    ]
                }

Alexander Alexander · Accepted Answer · 2016-09-06T18:22:36

The combobox has a change listener which you want to use:

listeners:{
    change:function(cb,newValue) {
        cb.nextSibling().setVisible(newValue=="NSP Partner");
    }
}

Because you haven't selected NSP Partner as default value on the checkbox, you should configure the grid as hidden by default:

hidden:true

ExtJS 5.0.1 Show grid based on combobox selection

1 Answers