Sencha觸摸列表不顯示（再次！）

Question

我的Sencha觸摸列表不顯示。我所做的只是將根容器更改爲導航視圖，以便可以將其他視圖壓入其中，但導航並不喜歡將「適合」作爲根。所以我把它轉移到另一個'fit'類型的容器中。但是，現在列表不顯示？！

見下文：

Ext.define('MyApp.view.inbox.MyInbox', { 
    extend: 'Ext.navigation.View', 
    alias: 'widget.myinboxview', 

    requires: [ 
     'Ext.navigation.View' 
    ], 

    config: { 
     title: 'My Inbox', 
     xtype: 'card', 
     items: [ 
      { 
       xtype: 'container', 
       type: 'vbox', 
       items: [ 
        { 
         xtype: 'container', 
         flex: 1, 
         items: [ 
          { 
           xtype: 'container', 
           margin: 10, 
           layout: { 
            type: 'hbox' 
           }, 
           items: [ 
            { 
             xtype: 'label', 
             html: 'You have sent' 
            }, 
            { 
             xtype: 'label', 
             html: '0 enquiry', 
             right: 0 
            } 
           ] 
          }, 
          { 
           xtype: 'container', 
           margin: 10, 
           cls: 'linesAboveBelow', 
           layout: { 
            type: 'hbox' 
           }, 
           items: [ 
            { 
             xtype: 'label', 
             html: 'You have' 
            }, 
            { 
             xtype: 'label', 
             html: '1 unread response', 
             right: 0 
            } 
           ] 
          } 
          ] 
        }, 
        { 
         xtype: 'container', 
         flex: 5, 
         layout: { 
          type: 'fit' 
         }, 
         items: [ 
          { 
           xtype: 'list', 
           store: 'theInboxEnquiryStore', 
           itemTpl: [ 
            '<div>Date: { CreationDate }</div>' 
           ] 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    } 
}); 

Answer 1

我修改了你的佈局代碼。 Here is a fiddle for it.

Ext.define('MyApp.view.inbox.MyInbox', { 
      extend: 'Ext.navigation.View', 
      alias: 'widget.myinboxview', 
      requires: ['Ext.navigation.View'], 
      config: { 
       title: 'My Inbox', 
       fullscreen: true, 
       items: [{ 
        xtype: 'container', 
        layout: 'vbox', 
        title: 'My Inbox', 
        items: [{ 
         xtype: 'container', 
         items: [{ 
          xtype: 'container', 
          margin: 10, 
          layout: 'hbox', 
          items: [{ 
           xtype: 'label', 
           html: 'You have sent' 
          }, { 
           xtype: 'label', 
           html: '0 enquiry', 
           right: 0 
          }] 
         }, { 
          xtype: 'container', 
          margin: 10, 
          cls: 'linesAboveBelow', 
          layout: 'hbox', 
          items: [{ 
           xtype: 'label', 
           html: 'You have' 
          }, { 
           xtype: 'label', 
           html: '1 unread response', 
           right: 0 
          }] 
         }] 
        }, { 
         xtype: 'list', 
         itemTpl: '{title}', 
         flex: 1, 
         data: [{ 
          title: 'Item 1' 
         }, { 
          title: 'Item 2' 
         }, { 
          title: 'Item 3' 
         }, { 
          title: 'Item 4' 
         }] 
        }] 
       }] 
      } 
     }); 

有一對夫婦的錯誤配置的項目，如的xtype的：卡類型： 'VBOX'。刪除了這些。刪除列表的額外包裝容器。更改了flex屬性。僅向列表添加了flex。正如你希望列表填充標籤渲染後的剩餘空間。由於導航視圖具有子項目的標題，因此將標題「我的收件箱」添加到子容器。

Answer 2

您需要使用：

layout: 'vbox' 

代替：

type: 'vbox' 

你的第一個容器，它應該工作。