javascript - ExtJS 5.0.1 基于组合框选择显示网格

Question

寻求一些有关根据组合框选择显示/隐藏表单容器元素的帮助。

我只希望当且仅当在组合框中选择“NSP Provider”时网格(id:NspList)才会显示(id:carrierConnectivity)。有谁知道如何实现这一点？代码片段如下:

                  {
                    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 1

组合框有一个您想要使用的更改监听器:

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

由于您尚未在复选框中选择“NSP 合作伙伴”作为默认值，因此您应该将网格配置为默认隐藏:

hidden:true