radiobuttton 선택에 따라 패널을 표시하기 위해 카드 레이아웃에 setActiveItem을 사용하는 방법은 무엇입니까?

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

당신은 다음 단계를 사용합니다 : -

• 먼저 당신은 당신이 RadioGroup의 change 이벤트에 layout:"card"을 제공 한 구성 요소를 얻을 필요가있다.
• 이제 구성 요소의 getLayout()을 얻어야합니다.
• card 레이아웃 구성 요소의 setActiveItem(newItem) 메서드를 사용해야합니다. 이 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' 
     }] 
    }] 
});