如何在选择特定单选按钮时显示卡片布局面板

Question

 var radioGroup = {
                xtype: 'radiogroup',
                layout: 'hbox',
                width: 800,
               items: [{
                  boxLabel: 'Select Time Interval',
                  name: 'timeInterval',
                  id: 'selectTimeInterval',
                  inputValue: 'timeSelector',
                  checked: 'true',
                  handler: function() {
                      //Ext.getCmp('PanelID').layout.setActiveItem('timeIntervalPanel');
                      PanelID.setActiveItem('timeIntervalPanel');
                  }
               },
               {
                  boxLabel: 'Specific Interval',
                  name: 'timeInterval',
                  id: 'specificTimeInterval',
                  inputValue: 'specificInterval',
                  handler: function() {
                      //Ext.getCmp('PanelID').layout.setActiveItem('card-2');
                      PanelID.setActiveItem('card-2');
                  }


               },{

                   boxLabel: 'Last Measurement Collected',
                   name: 'timeInterval',
                   id: 'LastMeasurementCollected',
                   inputValue: 'lastMeasuremnet'

               }]

            };


             var cardPanel = Ext.create('Ext.panel.Panel', {
                 layout: 'card',
                 id: 'PanelID',
                 activeItem: 0,
                 items: [ {
                     itemId: 'timeIntervalPanel',
                     name: 'timeInterval',
                     xtype: 'optima-timeintervalpanel',
                     text: 'select',
                     endDate: new Date(),
                     startDate: Ext.Date.add(new Date(), Ext.Date.DAY, - 30)
                    },
                     {
                         itemId: 'card-2',
                         html: 'hello2'
                     }
                     ]
             });

Answer 1

如果你想通过绑定来实现，那么在RadioGroup上的绑定可以参考docs。

下面是您编辑的代码片段，用于在单选按钮选择上显示其中一个面板：

items: [{
            xtype: 'radiogroup',
            layout: 'hbox',
            width: 800,
            bind: {
                value: '{selectedValue}'
            },
            items: [{
                boxLabel: 'Select Time Interval',
                name: 'timeInterval',
                inputValue: 'timeSelector',
                checked: 'true',
            }, {
                boxLabel: 'Specific Interval',
                name: 'timeInterval',
                id: 'specificTimeInterval',
                inputValue: 'specificInterval',
            }, {

                boxLabel: 'Last Measurement Collected',
                name: 'timeInterval',
                id: 'LastMeasurementCollected',
                inputValue: 'lastMeasuremnet'
            }],
        }, {
            xtype: 'panel',
            layout: 'card',
            bind: {
                activeItem: '{selectedValue.timeInterval}'
            },
            items: [{
                itemId: 'timeSelector',
                name: 'timeInterval',
                xtype: 'datepicker',
                fieldLabel: 'select',
                endDate: new Date(),
                startDate: Ext.Date.add(new Date(), Ext.Date.DAY, -30)
            }, {
                itemId: 'specificInterval',
                html: 'hello2'
            }, {
                itemId: 'lastMeasuremnet',
                html: 'hello3'
            }]
        }]

检查工作中的Fiddle。

Answer 2

您需要在发生更改事件时切换布局，这可以使用以下代码来完成。listeners: { change: function() { Ext.getCmp('PanelID').getLayout().setActiveItem(1); } }

我已经更新了this fiddle中的代码