垂直堆疊兩個Sencha Ext.Lists

我想垂直堆疊兩個Sencha Touch Ext.List。我希望這兩個列表都屬於可滾動的容器。我遇到的問題是我不知道如何將這些列表配置爲完全展開的組件（包含的容器應該處理滾動）。垂直堆疊兩個Sencha Ext.Lists

I.e.您將不得不向下滾動第一個列表的全部內容才能進入第二個列表。

此外，容納容器也應該可以填充其他堆疊組件，例如表格。

例子：

-> Container (should show scroll bars if contained content doesn't fit in the container) 
    -> Form (should not show any scrollbars, thus fully expanded) 
    -> List (should not show any scrollbars, thus fully expanded) 
    -> List (should not show any scrollbars, thus fully expanded)

UPDATE

我已經成功地得到的東西通過列表滾動設置爲null工作。但是，它只適用於2.1.0之前的Sencha Touch版本，因此2.0.1可以正常工作。

var mainPanel = Ext.create("Ext.Container", 
    { 
     fullscreen: true, 
     layout: 'vbox' 
    }); 

    var subPanel = Ext.create("Ext.Container", { 
     flex: 1, 
     layout: 'vbox' 
    }); 

    Ext.define('MyList', { 
     extend: 'Ext.List', 
     config: { 
      scrollable: null, 
      fullscreen: false 
     } 
    }); 

    var itemName = 'MyItem'; 
    Ext.define(itemName, { 
     extend: 'Ext.data.Model', 
     config: { 
      fields: ["title"] 
     } 
    }); 

    var store = Ext.create('Ext.data.Store', { 
     model: itemName, 
     data: [ 
       { title: 'row1' }, 
       { title: 'row2' } 
      ] 
    }); 

    var list1 = Ext.create('MyList'); 
    list1.setItemTpl('<div>List 1 - {title}</div>'); 
    list1.setStore(store); 

    var list2 = Ext.create('MyList'); 
    list2.setItemTpl('<div>List 2 - {title}</div>'); 
    list2.setStore(store); 

    subPanel.add(list1); 
    subPanel.add(list2); 

    mainPanel.add(subPanel); 
    Ext.Viewport.add(mainPanel);

任何想法爲什麼它不起作用在2.1.0+？

來源

2013-04-27 Dustflow

您是否嘗試將列表的scrollable配置設置爲false？

我建議延長Ext.dataview.DataView而不是從Ext.dataview.List開始。你將不得不建立一些你自己的樣式，但我發現這通常比試圖從Ext.List中刪除不需要的功能容易。

來源

2013-04-29 02:45:32 bjudson

設置可滾動爲false似乎沒有任何區別。我會查看Ext.dataview.DataView解決方案，感謝您的建議。 – Dustflow 2013-04-29 06:44:43

垂直堆疊兩個Sencha Ext.Lists

回答

相關問題