如何设置卡片布局容器？

Question

请帮忙！我对sencha touch很陌生，我有一个问题。问题出在SettingsThirdField中，当我更改SettingsSecondField项目值中的selectfield时，SettingsThirdField项目也必须更改ActiveItem。对于Instance，当我选择德语时，SettingsThirdField项目中必须将第二项设置为ActiveItem。

Ext.define('MS.view.settings.Main', { 
    extend: 'Ext.Panel', 
    alias: 'widget.settings', 

config: {  
    layout: 'vbox',  
    items: [ 
     { 
      xtype: 'container', 
      id: 'SettingsFirstField',    
      html: '<h1>First Item</h1>' 
     }, 
     { 
      xtype: 'fieldset', 
      id: 'SettingsSecondField', 
      items: [ 
       { 
        xtype: 'selectfield', 
        label: 'Language', 
        labelWidth: '35%', 
        options: [ 
         {text: 'French', value: 'first'}, 
         {text: 'German', value: 'second'}, 
         {text: 'English', value: 'third'} 
        ] 
       } 
      ] 
     }, 
     { 
      xtype: 'container', 
      id: 'SettingsThirdField',    
      layout: 'card', 
      items: [ 
       { 
        xtype: 'container',      
        html: '<h1>Selected French Language</h1>' 
       }, 
       { 
        xtype: 'container',      
        html: '<h1>Selected German Language</h1>' 
       }, 
       { 
        xtype: 'container',      
        html: '<h1>Selected English Language</h1>' 
       } 
      ] 

     } 
    ] 
} 
}) 

谢谢大家

Answer 1

没有测试，但它应该工作。 只需添加更改的侦听器并在处理程序中选择正确的选项卡即可。

Ext.define('MS.view.settings.Main', { 
     extend: 'Ext.Panel', 
     alias: 'widget.settings', 

    config: {  
     layout: 'vbox',  
     items: [ 
      { 
       xtype: 'container', 
       id: 'SettingsFirstField',    
       html: '<h1>First Item</h1>' 
      }, 
      { 
       xtype: 'fieldset', 
       id: 'SettingsSecondField', 
       items: [ 
        { 
         xtype: 'selectfield', 
         label: 'Language', 
         labelWidth: '35%', 
         options: [ 
          {text: 'French', value: 'first'}, 
          {text: 'German', value: 'second'}, 
          {text: 'English', value: 'third'} 
         ], 
         listeners: { 
         change: function (select, newValue, oldValue) { 
          if(newValue.data.value === 'French'){ 
           Ext.ComponentQuery.query('#SettingsThirdField')[0].setCard('frCard'); 
          } 
         } 
        } 
        } 
       ] 
      }, 
      { 
       xtype: 'panel', 
       id: 'SettingsThirdField',    
       layout: 'card', 
       items: [ 
        { 
         xtype: 'container', 
         id:'frCard',      
         html: '<h1>Selected French Language</h1>' 
        }, 
        { 
         xtype: 'container', 
         id:'deCard',    
         html: '<h1>Selected German Language</h1>' 
        }, 
        { 
         xtype: 'container', 
         id:'enCard',      
         html: '<h1>Selected English Language</h1>' 
        } 
       ] 

      } 
     ] 
    } 
    })