ExtJS: добавлена ​​автоматическая прокрутка вертикальных панелей формы.

Question

Я пишу приложение, в котором у меня есть BorderLayout для всей страницы. В южной части у меня есть панель, к которой я добавляю FormPanels. Я хотел бы иметь возможность прокручивать эту панель, чтобы прокручивать FormPanels.

Пока что ничего, что я нашел из поисков, не помогло. Я не совсем понимаю, что ExtJS требует с точки зрения комбинации LayoutManager, установки размера и настройки 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();
}

Answer 1

Ваша южная панель является основным контейнером для ваших компонентов, поэтому она должна быть autoScroll:true, и вы должны добавить в нее как форму, так и сетку. Вы не можете реально добавить сетку в FormPanel напрямую, так как это не поле формы (вам нужно будет обернуть его как поле или реализовать некоторый интерфейс поля). Он может работать с югом, не имеющим макета (браузер должен просто прикрепить сетку непосредственно после формы), но обычно лучше указать соответствующий макет (vbox было бы хорошим в этом случае).

Answer 2

Панель , содержащая , должна иметь установленную высоту.Содержащиеся панели должны иметь либо установленную высоту, либо autoHeight: true.