Lista dotykowa Sencha nie jest wyświetlana (ponownie!)

Question

Moja lista dotykowa Sencha nie jest wyświetlana. Jedyne, co zrobiłem, to zmienić kontener główny na widok nawigacyjny, aby można było do niego przenosić inne widoki, ale wtedy nawigacja nie lubi "dopasowania" jako katalogu głównego. Więc przeniosłem to do innego pojemnika z napisem "dopasowanie". Jednak teraz lista się nie wyświetla ?!

Patrz poniżej:

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

Zmodyfikowałem twój kod układu. 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' 
         }] 
        }] 
       }] 
      } 
     }); 

Było kilka błędnych elementów konfiguracyjnych, takich jak xtype: Kartą, typu: 'VBox'. Usunięto je. Usunięto dodatkowy kontener opakowania dla listy. Zmieniono właściwości flex. Dodano tylko flex do listy. Tak jak chcesz, aby lista wypełniła pozostałe miejsce po wyrenderowaniu etykiet. Dodano tytuł "Moja skrzynka odbiorcza" do kontenera podrzędnego, ponieważ widok nawigacyjny ma swój tytuł z elementów potomnych.

Answer 2

Trzeba użyć:

layout: 'vbox' 

zamiast:

type: 'vbox' 

do pierwszego pojemnika i powinno działać.