मैं वीबीएक्स लेआउट में सेन्चा टच सूची डिस्प्ले कैसे बना सकता हूं?

Question

मेरे पास लेआउट सेट के साथ एक मुख्य पैनल है जो vbox पर सेट है। मैं पैनल में दो अलग-अलग सूचियां जोड़ना चाहता हूं। मैं चाहता हूं कि दो सूचियां लंबवत रूप से रुक जाएंगी, और जैसे ही वे मुख्य पैनल के नीचे बहती हैं, पैनल को बस स्क्रॉल करना चाहिए।

हालांकि, प्रदर्शित करने के लिए सूचियों को एक एफआईटी लेआउट में सेट करने की आवश्यकता होती है। फ़िट लेआउट आइटमों के लंबवत ढेर की अनुमति नहीं देते हैं।

क्या मुझे लेआउट सिस्टम की एक विशेषता याद आ रही है जो मुझे सूची को एक vbox लेआउट के साथ पूरी तरह से अपने माता-पिता के अंदर प्रदर्शित करने की अनुमति देती है?

Answer 1

Ext.List घटक का सुपरक्लास Ext.DataView है और Ext.Panel नहीं है।

इसलिए, आपको दो अलग-अलग पैनलों में दो सूची जोड़ने और सुपर पैनल के अंदर उन दो पैनलों को जोड़ने की आवश्यकता होगी।
इसके अलावा, आप यहाँ कैसे आप यह कर सकते है अन्य दो बच्चे पैनलों

के लिए superpanel के लिए layout:'vbox' बनाने के लिए और layout:'fit' करने की आवश्यकता होगी।

.... 
.... 
var superpanel = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox',    // to vertically stack two list. 
    items: [ 
     { 
      xtype: 'panel', 
      id: 'panel_1', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        flex:1, 
        id: 'list1', 
        store: 'samplestore1' 
       } 
      ] 
     }, 
     { 
      xtype: 'panel', 
      id: 'panel_2', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        id: 'list2', 
        flex:1, 
        store: 'samplestore2' 
       } 
      ] 
     } 
    ] 
}); 
.... 
.... 

Answer 2

var parent = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox', 
    items: [ 
     { 
      xtype: 'list', 
      id: 'list_1', 
      store: 'store1, 
      flex: 1 
     }, 
     { 
      xtype: 'list', 
      id: 'list_2', 
      store: 'store2, 
      flex: 1 
     } 
    ] 
}); 

Answer 3

डाल ऊंचाई: सूची आइटम पर 'ऑटो'

items: [ 
    { 
     xtype: 'list', 
     height: 'auto' 
    }, 
    { 
     xtype: 'list', 
     height: 'auto', 
    } 
]