ExtJS:如何设置dockedItems alignTarget

wko9yo5t  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(267)

我将dockedItems添加到form.Panel中,它与表单对齐,但我希望dockedItems与表单内的table对齐,该怎么办。
以下是演示:https://fiddle.sencha.com/#view/editor&fiddle/3kso
谢谢

lvmkulzt

lvmkulzt1#

由于您将视口的布局设置为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]
    }]
});

重要的是,通过在布局中使用vboxmiddle,表单只会占据它需要的位置。

编辑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',
        }, ],
    }]
});

相关问题