ExtJS：自動滾動垂直FormPanels添加到面板

我正在寫一個應用程序，我有一個BorderLayout整個頁面。在南部我有一個面板，我添加FormPanels。我希望能夠滾動該面板，以便可以滾動瀏覽FormPanel。ExtJS：自動滾動垂直FormPanels添加到面板

到目前爲止，我從搜索中找到的東西都沒有幫助。我不太瞭解ExtJS在佈局管理器組合，設置大小和設置AutoScroll方面的要求。

任何部分提示將不勝感激地跟進。

的代碼段：

new Ext.Viewport({ 
    layout: "border", 
    items: [{ 
     region: "north", 
     contentEl: "title", 
     height: 50 
    }, { 
     region: "center", 
     id: "mappanel", 
     title: "Map", 
     xtype: "gx_mappanel", 
     map: map, 
     layers: [layer], 
     extent: extent, 
     split: true, 
     tbar: toolbarItems 
    }, { 
     region: "east", 
     title: "Details", 
     width: 300, 
     split: true, 
     id: "east-panel", 
     laout: 'fit' 
    }, { 
    region: "south", 
    id: "south-panel", 
    height: 200 
    }, { 
    region: "west", 
    id: "west-panel", 
    width: 300 
    }] 
}); 

matchedTrailJunctionsPanel = new Ext.Panel({ 
     title: "Matched Trail Junctions2", 
     id: "matched-trail-junctions", 
     autoScroll:true 
     //layout: 'anchor' 
    }); 

var southPanel = Ext.getCmp('south-panel'); 

southPanel.add(matchedTrailJunctionsPanel); 
southPanel.doLayout(); 

createTrailJunctionPanel = function(trailJunction) { 
var trailJunctionPanel = new Ext.form.FormPanel({ 
    labelWidth: 75, 
    width: 350, 
    defaultType: 'textfield', 
    items: [{ 
      fieldLabel: 'Junction Name', 
      name: 'junction-name' 
     }], 
    autoScroll:true, 
    //anchor: '100% 100%', 
    height: 100 
}); 
matchedTrailJunctionsPanel.add(trailJunctionPanel); 
if(trailJunction.publicTrailSegments.length == 0) { 
    matchedTrailJunctionsPanel.add(new Ext.form.Label({text: 'No public trails matched'}));  
} else { 
    var grid = new Ext.grid.GridPanel({ 
     store: mapMatchObjectStore, 
     columns: [ 
      {id:'publicTrailSegment',header: 'Trail', width: 160, sortable: true, dataIndex: 'publicTrailSegment'} 
     ], 
     stripeRows: true, 
     autoExpandColumn: 'publicTrailSegment', 
     height: 350, 
     width: 600, 
     title: 'Matched Trail Junctions'  
    }); 
    matchedTrailJunctionsPanel.add(grid); 
} 
matchedTrailJunctionsPanel.doLayout(); 
}

來源

2010-04-05 Sarge

如果matchedTrailJunctionsPanel是邊框佈局的一部分，則需要設置區域值。邊界佈局也必須具有「中心」區域。你能發佈整個代碼嗎？ – 2010-04-05 17:07:37

我已根據要求包含更多代碼。我發現在包含面板上設置高度，matchedTrailJunctionsPanel顯示滾動條。但是，包括GridPanel會混淆事物並且GridPanel會隱藏任何後面的面板。 – Sarge 2010-04-05 17:38:44

你以南面板是你的組件的主要容器，所以它應該是autoScroll:true，你應該同時添加表單和網格進去。你不能直接將一個網格添加到FormPanel中，因爲它不是一個表單字段（你必須將它包裝爲一個Field或實現一些Field的接口）。它可能在沒有佈局的南方工作（瀏覽器應該在表格後直接粘貼網格），但通常最好指定一個合適的佈局（在這種情況下vbox將是一個好的佈局）。

來源

2010-04-05 18:07:43

將southPanel更改爲autoScroll（並隨後將包含的對象更改爲autoHeight：true）。網格問題是底層數組與另一個商店共享。感謝您對FormPanels網格的建議。 – Sarge 2010-04-05 18:28:17

如果我的答案幫助你應該考慮接受它。謝謝！ ExtJS 4.0中的 – 2010-04-07 04:18:31

autoHeight僅適用於容器，因此，只要閱讀文檔，將autoHeight添加到添加的子組件中不起作用。如果我錯了，請糾正我 – Chris 2011-12-04 20:07:33

包含面板的必須設置高度。包含的面板必須設置高度或設置爲autoHeight: true。

來源

2010-04-05 18:30:43 Sarge

ExtJS：自動滾動垂直FormPanels添加到面板

回答

相關問題