Sencha Touch 응용 프로그램에 카드가 표시되지 않습니다.

Question

Sencha Touch 1.1을 사용하고 있습니다. 다음 코드는 뷰를 구성합니다.

truApp.views.IncidentParentView = Ext.extend(Ext.Panel, { 

layout: { 
    type: 'hbox', 
    align: 'top' 
}, 

initComponent: function() { 

    this.sectionStore = Ext.StoreMgr.get(TrafficResponse.Stores.IncidentSections); 

    this.topToolbar = new Ext.Toolbar({ 
     items: [ 
       { 
        text: 'Cancel', 
        ui: 'back', 
        handler: function() { 
         Ext.dispatch({ 
          controller: truApp.controllers.incidentController, 
          action: 'cancel' 
         }); 
        } 
       }, 
       { 
        xtype: 'spacer' 
       }, 
       { 
        text: 'Submit', 
        ui: 'confirm', 
        handler: function() { 
         Ext.dispatch({ 
          controller: truApp.controllers.incidentController, 
          action: 'submit' 
         }); 
        } 
       } 
       ] 
    }); 

    this.dockedItems = [ this.topToolbar ]; 

    this.items = [ 
     { 
      flex: 1, 
      dockedItems: [ 
       { 
        xtype: 'toolbar', 
        title: 'Sections', 
        ui: 'light' 
       }    
      ], 
      items: [ 
       { 
        xtype: 'list', 
        store: this.sectionStore, 
        scroll: false, 
        itemTpl: '{Description}', 
        listeners: { 
         itemTap: function(dataView, index, item, e) { 
          var record = dataView.store.getAt(index); 

          truApp.views.incidentParentView.getComponent('incidentCardPanel').setActiveItem(
           index, 
           { type: 'slide', direction: 'left' } 
          ); 
         }, 
         afterrender: function(dataView) { 
          dataView.getSelectionModel().select(0, false, false); 

          truApp.views.incidentParentView.getComponent('incidentCardPanel').setActiveItem(
           0, 
           { type: 'slide', direction: 'left' } 
          ); 
         } 
        }, 
        onItemDisclosure: true 
       } 
      ] 
     }, 
     { 
      flex: 3, 
      id: 'incidentCardPanel', 
      xtype: 'panel', 
      layout: 'card', 
      items: [ 
       { 
        html: 'card 1' 
       }, 
       { 
        html: 'card 2' 
       }, 
       { 
        html: 'card 3' 
       }, 
       { 
        html: 'card 4' 
       }, 
       { 
        html: 'card 5' 
       }, 
       { 
        html: 'card 6' 
       } 
      ] 
     } 
    ]; 

    truApp.views.IncidentParentView.superclass.initComponent.call(this); 

} 

}); 

'카드'레이아웃을 사용하면 아무 것도 표시되지 않습니다. 'vbox'를 사용하면 카드 1 ~ 카드 6의 6 개 항목이 모두 표시됩니다.

카드 레이아웃을 사용할 때 항목이 표시되지 않는 이유는 무엇입니까?

Answer 1

카드 레이아웃 설정에 fullscreen: true을 추가하십시오. 테스트하지는 않았지만 처음 추측했습니다