2011-12-19 19 views
0

我正在使用Sencha Touch 1.1。以下代碼組成視圖:卡在Sencha Touch應用程序中不顯示

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'時,顯示所有6項 - 卡1到卡6。

爲什麼使用卡片佈局時不顯示項目?

回答

0

嘗試將fullscreen: true添加到您的卡片佈局設置中。沒有測試,但是我的第一個猜測

+0

這導致卡渲染,但因爲它是一個嵌套的卡布局最終的佈局不是我所需要的。呈現問題是由未設置卡面板的高度屬性引起的。 – Anthony 2011-12-20 23:33:28

+0

你的問題是關於卡片沒有顯示。這似乎是固定的,對嗎?究竟你期望的效果是什麼? – 2011-12-21 09:52:35

+0

卡面板嵌套在hbox面板中。使卡面板全屏停止顯示其他hbox組件。 – Anthony 2011-12-21 22:34:01

相關問題