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を追加してみてください。テストしませんでしたが、私の最初の推測です