由于您将视口的布局设置为fit，并且还为表格指定了固定宽度（300 px），因此表单被排序为占据剩余区域，这就是工具栏位于左侧边缘的原因。
尽管您可以尝试使工具栏floating与表格对齐，但我认为让表单只占用所需的空间更容易，因此工具栏将与表单对齐。
为此，在小提琴的末端，尝试以下代码来更改视口的布局：

Ext.create('Ext.container.Viewport', {
    layout: {
        type: 'vbox',
        align: 'middle'
    },
    items: [form]
});

如果出于其他原因需要配合布局，可以保留配合布局，并将表单添加到容器中：

Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: [{
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'middle'
        },
        items: [form]
    }]
});

或者，如果您需要一个占据所有位置的面板，并且您想要一个内部带有对齐工具栏的面板，您可以使用和外部面板以及内部面板（选中灰色背景以查看外部面板）：

Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: [{
        xtype: 'panel',
        bodyStyle: {
            background: '#eeeeee'
        },
        layout: {
            type: 'vbox',
            align: 'middle'
        },
        items: [form]
    }]
});

重要的是，通过在布局中使用vbox和middle，表单只会占据它需要的位置。

编辑1：

为了解决评论中的问题，这里有一个完整的例子，可以作为提琴来运行：

const form = Ext.create('Ext.form.Panel', {
    autoScroll: true,
    bodyStyle: {
        background: '#abd1ca'
    },
    layout: {
        type: 'table',
        columns: 2,
        tableAttrs: {
            style: {
                width: '300px',
                'background': '#e3f2fd',
                'border-collapse': 'collapse',
            }
        },
        tdAttrs: {
            style: {
                border: '1px solid #ccc',
                padding: '6px',
            }
        }
    },
    fieldDefaults: {
        labelWidth: 40,
        width: '100%',
    },
    items: new Array(100).fill({
        fieldLabel: 'sample',
        xtype: 'textfield'
    }),

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'left',
        items: [{
            iconCls: null,
            glyph: 61,
            xtype: 'button'
        }, '-', {
            iconCls: null,
            glyph: 88,
            xtype: 'button'
        }, {
            iconCls: null,
            glyph: 70,
            xtype: 'button'
        }, '-', {
            iconCls: null,
            glyph: 47,
            xtype: 'button'
        }]
    }]

});

Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: [{
        xtype: 'panel',
        bodyStyle: {
            background: '#eeeeee'
        },
        layout: {
            type: 'hbox',
            align: 'stretch',
            pack: 'middle'
        },
        items: [form],
        buttonAlign: 'center',
        buttons: [{
            text: 'Save',
            handler: 'save',
        }, ],
    }]
});