如何使用setActiveItem進行卡片佈局以基於radiobuttton選擇顯示面板？

Question

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

Answer 1

您需要使用以下步驟： -

• 首先，你需要得到您已在change事件RadioGroup提供layout:"card"組件。
• 現在，您需要獲得組件的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' 
     }] 
    }] 
});