CODEWITHSUNDEEP
extjs
anka
anka

Reputation: 41

How to display card layout panels when selecting a particular radio button

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

Upvotes: 0

Views: 172

Answers (2)

Amita Suri
Amita Suri

Reputation: 319

If you want to do it with binding, then refer docs for binding on RadioGroup.

Given below is your edited code snippet for displaying one of the panels on radio button selection:

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

Check the working Fiddle.

Upvotes: 1

Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2193

you need to switch the layout on change event that can be done using below code. listeners: { change: function() { Ext.getCmp('PanelID').getLayout().setActiveItem(1); } }

I have updated your code in the this fiddle

Upvotes: 0

Related Questions