代码之家  ›  专栏  ›  技术社区  ›  Sarge

extjs:自动滚动添加到面板的垂直窗体面板

  •  2
  • Sarge  · 技术社区  · 16 年前

    我正在写一个应用程序,我有一个整个页面的边框布局。在南部,我有一个面板,我添加了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();
    }
    
    2 回复  |  直到 16 年前
        1
  •  2
  •   Brian Moeskau    16 年前

    南面板是组件的主要容器,因此 autoScroll:true 你应该把你的表格和表格都加进去。不能直接将网格添加到窗体面板中,因为它不是窗体字段(必须将其包装为字段或实现某些字段的接口)。它可能适用于没有布局的south(浏览器应该只在表单后面粘贴网格),但通常最好指定适当的布局( vbox 在这种情况下会是个不错的选择)。

        2
  •  1
  •   Sarge    16 年前

    这个 包含 面板必须设置高度。包含的面板必须设置高度或 autoHeight: true 集合。