Jukebox Jukebox - 1 year ago 143
Javascript Question

ExtJS 5.0.1 Show grid based on combobox selection

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'}


Answer Source

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

    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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download