ExtJS:自动滚动垂直窗体面板添加到面板
我正在编写一个应用程序,其中我有一个整个页面的边框布局。在南部,我有一个面板,我在其中添加了FormPanels。我想能够滚动该面板,以便我可以滚动通过FormPanels 到目前为止,我在搜索中没有找到任何帮助。我不太明白ExtJS在布局管理器、设置大小和设置AutoScroll的组合方面需要什么 任何部分提示都将被感激地跟进 代码片段:ExtJS:自动滚动垂直窗体面板添加到面板,extjs,Extjs,我正在编写一个应用程序,其中我有一个整个页面的边框布局。在南部,我有一个面板,我在其中添加了FormPanels。我想能够滚动该面板,以便我可以滚动通过FormPanels 到目前为止,我在搜索中没有找到任何帮助。我不太明白ExtJS在布局管理器、设置大小和设置AutoScroll的组合方面需要什么 任何部分提示都将被感激地跟进 代码片段: new Ext.Viewport({ layout: "border", items: [{ region: "north"
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();
}
您的南面板是组件的主要容器,因此它应该是
autoScroll:true
,并且您应该将表单和网格添加到其中。您不能直接将网格添加到FormPanel中,因为它不是表单字段(您必须将其包装为字段或实现一些字段接口)。它可能适用于south没有布局的情况(浏览器应该直接在表单后粘贴网格),但通常最好指定适当的布局(vbox
在这种情况下是一个好的布局)。包含的面板必须设置高度。包含的面板必须设置高度或设置自动高度:true。如果MatchedRailJunctionsPanel是边框布局的一部分,则需要设置区域值。边框布局还必须具有“中心”区域。你能发布全部代码吗?我已经按照要求添加了更多代码。我发现在包含面板MatchedRailJunctionsPanel上设置高度会显示滚动条。但是,包含GridPanel会使事情变得混乱,GridPanel会隐藏以下任何面板。将southPanel更改为autoScroll(随后将包含的对象更改为autoHeight:true)可以正常工作。网格问题是底层阵列与另一个存储共享。谢谢你的建议,关于网格面板。如果我的回答帮助你应该考虑接受它。谢谢在ExtJS 4.0中,autoHeight仅适用于容器,因此,就我阅读的文档而言,将autoHeight添加到添加的子组件没有任何效果。如果我错了,请纠正我