Sencha Touch-Liste wird nicht angezeigt (wieder!)

Question

Meine Sencha Touch-Liste wird nicht angezeigt. Alles was ich getan habe, war den Root-Container in eine Navigationsansicht zu ändern, so dass andere Ansichten auf ihn gedrängt werden können, aber dann mag es die Navigation nicht, als Root zu "passen". Also habe ich das in einen anderen Container mit dem Typ 'fit' verschoben. Aber jetzt wird die Liste nicht angezeigt ?!

Siehe unten:

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

Ich habe Ihren Layoutcode geändert. 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' 
         }] 
        }] 
       }] 
      } 
     }); 

Es gab ein paar falsche Config Produkte wie xtype: Karte, Typ: 'vbox'. Entfernt diese. Der zusätzliche Wrapper-Container für die Liste wurde entfernt. Die Flex-Eigenschaften wurden geändert. Nur Flex zur Liste hinzugefügt. Da die Liste den verbleibenden Platz füllen soll, nachdem die Beschriftungen gerendert wurden. Dem untergeordneten Container wurde der Titel "Mein Posteingang" hinzugefügt, da der Titel der Navigationsansicht aus den untergeordneten Elementen stammt.

Answer 2

Sie verwenden müssen:

layout: 'vbox' 

statt:

type: 'vbox' 

für den ersten Behälter und sollte es funktionieren.