extjs 如何在窗口的左侧和右侧分配按钮?

gpnt7bae  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(191)

我有一个窗口,我想在其中将“保存”和“取消”按钮添加到项目中。
我知道有一个按钮配置,但它不适用于缩放。所以如果我放大,我看不到任何滚动条。
这就是为什么我认为它可能工作,如果它被添加到项目(像其他组件)。
我有这样的代码:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'My Form',
            id: 'myform',
            renderTo: Ext.getBody(),
            width: 500,
            layout: {
                type: 'vbox',
            },

            items: [
                {
                    xtype: 'textarea',
                    id: 'myText',
                    width: '100%',
                    anchor: '100% 95%',
                    hideLabel: true,
                    value: 'Some text'
                },
                {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        pack: 'right'
                    },
                    items: [
                        {
                            xtype: 'button',
                            text: 'Highlight',
                            cls: 'green-button',
                            handler: function () {
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nClicked!');
                            }
                        },
                         {
                            xtype: 'button',
                            text: 'Highlight2',
                            cls: 'green-button',
                            handler: function () {
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nClicked!');
                            }
                        }
                    ]
                },
               
            ]
        });
    }
});

字符串
但是不管我做什么,按钮总是并排显示...我想在窗口的左下角和右下角显示按钮。


的数据
如何解决这个问题?
这就是小提琴的环节:
https://fiddle.sencha.com/#view/editor&fiddle/3pj6

ffdz8vbo

ffdz8vbo1#

首先,你必须确保父容器将占用所有的空间。其次,你添加一个组件,它将占用所有可用的空间“flex:1”。这将使按钮在每一边一个。你可以尝试这样做。

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'My Form',
            id: 'myform',
            renderTo: Ext.getBody(),
            width: 500,
            layout: {
                type: 'vbox',
            },

            items: [
                {
                    xtype: 'textarea',
                    id: 'myText',
                    width: '100%',
                    anchor: '100% 95%',
                    hideLabel: true,
                    value: 'Some text'
                },
                {
                    xtype: 'container',
                    width: '100%',
                    layout: {
                        type: 'hbox',
                    },
                    items: [
                        {
                            xtype: 'button',
                            text: 'Highlight',
                            cls: 'green-button',
                            handler: function () {
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nClicked!');
                            }
                        },
                        {
                            flex: 1,
                        },
                        {
                            xtype: 'button',
                            text: 'Highlight2',
                            cls: 'green-button',
                            handler: function () {
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nClicked!');
                            }
                        }
                    ]
                },
               
            ]
        });
    }
});

字符串

相关问题