सेन्चा टच सूची प्रदर्शित नहीं हो रही है (फिर से!)

Question

मेरी सेन्चा टच सूची प्रदर्शित नहीं हो रही है। मैंने जो कुछ किया वह रूट कंटेनर को नेविगेशन व्यू में बदल दिया गया था, इसलिए अन्य विचारों को उस पर धक्का दिया जा सकता है, लेकिन फिर नेविगेशन को रूट के रूप में 'फिट' पसंद नहीं है। इसलिए मैंने इसे 'फिट' प्रकार के साथ दूसरे कंटेनर में ले जाया। हालांकि, अब सूची प्रदर्शित नहीं होती है ?!

नीचे देखें:

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

मैंने आपके लेआउट कोड को संशोधित किया है। कार्ड, टाइप करें:: 'vbox' 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 तरह गलत config आइटम के एक जोड़े थे। उनको हटा दिया। सूची के लिए अतिरिक्त रैपर कंटेनर हटा दिया। फ्लेक्स गुणों को बदल दिया। सूची में केवल फ्लेक्स जोड़ा गया। जैसा कि आप लेबल्स के बाद शेष स्थान को भरने के लिए सूची चाहते हैं। नेविगेशन व्यू के बच्चे के आइटम से इसका शीर्षक है क्योंकि बच्चे कंटेनर में 'माई इनबॉक्स' शीर्षक जोड़ा गया है।

Answer 2

आप उपयोग करने की आवश्यकता:

layout: 'vbox' 

के बजाय:

type: 'vbox' 

अपने पहले कंटेनर के लिए और यह काम करना चाहिए।