Elenco Sencha Touch non visualizzato (ancora!)

Question

La mia lista Sencha Touch non viene visualizzata. Tutto ciò che ho fatto è stato modificare il contenitore radice in una vista di navigazione in modo che altre viste possano essere spinte su di esso, ma in questo caso alla navigazione non piace avere "adattato" come root. Quindi l'ho spostato in un altro contenitore con il tipo "adatto". Tuttavia, ora l'elenco non viene visualizzato ?!

vedere qui sotto:

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

Ho modificato il codice di layout. 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' 
         }] 
        }] 
       }] 
      } 
     }); 

c'erano un paio di articoli errati di configurazione come xtype: carta, tipo: 'VBOX'. Rimossi quelli. Rimosso il contenitore wrapper extra per l'elenco. Modificato le proprietà flex. Aggiunto solo flex alla lista. Come vuoi che l'elenco riempia lo spazio rimanente dopo il rendering delle etichette. Aggiunto il titolo "La mia casella di posta" al contenitore figlio poiché la vista di navigazione ha il titolo degli elementi secondari.

Answer 2

è necessario utilizzare:

layout: 'vbox' 

invece di:

type: 'vbox' 

per il primo contenitore e dovrebbe funzionare.