如何使用setActiveItem进行卡片布局以根据单选按钮选择显示面板？

Posted 2021-04-05

var radioGroup = {
    xtype: 'radiogroup',
    itemId: 'radioButton',
    layout: 'hbox',
    width: 700,
    defaults: {
        flex: 1
    },
    items: [{
        boxLabel: option1
        name: 'timeInterval',
        inputValue:0
        checked: true
    }, {
        boxLabel: option2
        name: 'timeInterval',
        inputValue:1,
        checked: false

    }, {

        boxLabel: option1
        name: 'timeInterval',
        inputValue:2,
        checked: false

    }],
    listeners: {
        change: function (radio, newValue, oldValue) {

           if (radio.getValue().timeInterval == 2) {

             cardPanel.layout.setActiveItem(0);
//getting error cardPanel.layout.setActiveItem is not a function
                                 } else if (radio.getValue().timeInterval == 0) {

             cardPanel.layout.setActiveItem(1);
                                 } else if (radio.getValue().timeInterval == O1) {

             cardPanel.layout.setActiveItem(2);
                                 }
        }
    }
};

var cardPanel = {
  layout: 'card',
    itemId: 'PanelID',
    activeItem: 0,
    items: [{
      itemId: 'timeIntervalPanel',
        name: 'timeInterval',
        xtype: 'timeintervalpanel',
        selection: this.defaultData,
        dateFormat: this.dateFormat,
        timeFormat: this.timeFormat
    }, {
        id: 'specificIntervalPanel',
        name: 'timeInterval',
        xtype: 'specificinterval',
        selection: this.defaultData
    }, {
        itemId: 'emptyPanel',
        name: 'emptyCard',
        xtype: 'panel'
    }]
};

答案

您需要使用以下步骤： -

• 首先，您需要获得layout:"card"在change事件中提供的RadioGroup组件。
• 现在，您需要获得组件的getLayout()。
• 现在需要使用setActiveItem(newItem)方法的card布局组件。

在这个FIDDLE中，我使用您的代码创建了一个演示并进行了一些修改。我希望这能帮到您。

代码片段

//Timeinterval panel
Ext.define('Timeintervalpanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'timeintervalpanel',
    html: 'This is timeintervalpanel'
});

//Specific Interval panel
Ext.define('SpecificInterval', {
    extend: 'Ext.panel.Panel',
    xtype: 'specificinterval',
    html: 'This is specificinterval'
});

//Empty Panel
Ext.define('EmptyPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'emptyPanel',
    html: 'This is emptyPanel'
});

//Panel with radio button and card item.
Ext.create('Ext.panel.Panel', {
    title: 'Card Layout Example with radio buttons',
    renderTo: Ext.getBody(),
    height: window.innerHeight,
    layout: 'vbox',
    tbar: [{
        xtype: 'radiogroup',
        itemId: 'radioButton',
        layout: 'hbox',
        defaults: {
            flex: 1,
            margin: 5,
            name: 'timeInterval'
        },
        items: [{
            boxLabel: 'Timeinterval panel',
            inputValue: 0,
            checked: true
        }, {
            boxLabel: 'Specific Interval',
            inputValue: 1
        }, {
            boxLabel: 'Empty Panel',
            inputValue: 2
        }],
        listeners: {
            change: function (radio, newValue, oldValue) {
                var cardPanel = radio.up('panel').down('#PanelID').getLayout();

                cardPanel.setActiveItem(newValue.timeInterval);

                //Only just for animation
                //activeItem.getEl().slideIn('r');
            }
        }
    }],
    items: [{
        //This panel have provided card layout.
        xtype: 'panel',
        flex: 1,
        width: '100%',
        layout: 'card',
        itemId: 'PanelID',
        defaults: {
            bodyPadding: 20
        },
        items: [{
            xtype: 'timeintervalpanel'
        }, {
            xtype: 'specificinterval'
        }, {
            xtype: 'emptyPanel'
        }]
    }]
});