Extjs经典：resizing=true的Textarea无法调整大小

Question

我创建了这个小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3mh2。如果运行它，您会发现无法调整文本区域的大小，即使它具有属性

resizable: true

。

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var shows = Ext.create('Ext.data.Store', {
            fields: ['id', 'show'],
            data: [{
                id: 0,
                show: 'Battlestar Galactica'
            }, {
                id: 1,
                show: 'Doctor Who'
            }, {
                id: 2,
                show: 'Farscape'
            }, {
                id: 3,
                show: 'Firefly'
            }, {
                id: 4,
                show: 'Star Trek'
            }, {
                id: 5,
                show: 'Star Wars: Christmas Special'
            }]
        });

        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            title: 'Sci-Fi Television',
            width: 400,
            frame: true,
            resizable: true,
            items: [{
                xtype: 'tagfield',
                fieldLabel: 'Select a Show',
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true
            },
                {
                    xtype: 'textareafield',
                    resizable: true,
                    fieldLabel: 'Some label',
                    anchor: '100%',
                    //resizeHandles: 's',
                    //grow: true
                }]
        });
    }
});

我错过了什么？

为了让事情变得更有趣，我查看了文档：https://docs.sencha.com/extjs/7.6.0/classic/Ext.form.field.TextArea.html.

我将示例修改为：

Ext.create('Ext.form.FormPanel', {
    title      : 'Sample TextArea',
    width      : 400,
    bodyPadding: 10,
    renderTo   : Ext.getBody(),
    items: [{
        xtype     : 'textareafield',
        grow      : true,
        name      : 'message',
        fieldLabel: 'Message',
        anchor    : '100%',
        resizable: true,
    }]
});

（我添加了

resizable: true,

行） 如果我单击“运行”按钮并将鼠标悬停在上面，则会看到灰色条。

在另一种形式上，无论我将鼠标悬停在哪里，灰色条都不会显示。

但是...如果我包含

grow: true

，我会在用户界面中遇到一些奇怪的混淆 - 灰色条最终会出现，但位置不正确。

我怎样才能让这个表单看起来正确，并且仍然能够调整文本区域的大小。只需垂直调整文本区域的大小就足够了。

Answer 1

您只需几个步骤即可完成此操作：

1. 为表单面板指定

   vbox

   布局（调整面板大小时需要使用

   align: 'stretch'

   来水平拉伸表单字段）。
2. 将

   textareafield

   包裹到具有

   container

   布局的

   fit

   中，并将

   resizable

   设置在容器上而不是文本区域上。
3. 如果您使用定义

   resizer

   的对象而不是

   true

   ，则可以在

   Ext.resizer.Resizer

   中设置更多参数，请检查 documentation 以获取所有配置选项（

   pinned

   可能是始终显示调整大小处理程序的好主意).

至于步骤2，我无法确定为什么它在没有容器的情况下无法工作，但根据abocve链接的文档，

textarea

resizer有些不同，这可能是原因，但我只能猜测：

Textarea 和 img 元素将用额外的 div 包裹，因为这些元素不支持子节点。

此解决方案的一个缺点是，调整大小手柄不仅出现在

textarea

下方，而且出现在整个容器的下方，但这是我所能得到的。我在

labelAlign: 'top'

上尝试了

textarea

，但在调整大小时它在标签下方添加了一些空间。

Ext.application({
    name: 'Fiddle',
    launch: function () {

        var shows = Ext.create('Ext.data.Store', {
            fields: ['id', 'show'],
            data: [{
                id: 0,
                show: 'Battlestar Galactica'
            }, {
                id: 1,
                show: 'Doctor Who'
            }, {
                id: 2,
                show: 'Farscape'
            }, {
                id: 3,
                show: 'Firefly'
            }, {
                id: 4,
                show: 'Star Trek'
            }, {
                id: 5,
                show: 'Star Wars: Christmas Special'
            }]
        });

        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            title: 'Sci-Fi Television',
            width: 400,
            padding: 8,
            frame: true,
            resizable: true,
            layout: {
                type: 'vbox',
                align: 'stretch',
            },
            items: [{
                xtype: 'tagfield',
                fieldLabel: 'Select a Show',
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true
            }, {
                xtype: 'container',
                layout: {
                    type: 'fit',
                },
                resizable: {
                    pinned: true,
                    handles: 's',
                },
                items: [{
                    xtype: 'textareafield',
                    //labelAlign: 'top',
                    grow: true,
                    fieldLabel: 'Some label',
                }]
            }]
        });
    }
});

Answer 2

找到了另一种方法（小提琴这里）：

Ext.application({
    name: 'Fiddle',
    launch: function () {

        var shows = Ext.create('Ext.data.Store', {
            fields: ['id', 'show'],
            data: [{
                id: 0,
                show: 'Battlestar Galactica'
            }, {
                id: 1,
                show: 'Doctor Who'
            }, {
                id: 2,
                show: 'Farscape'
            }, {
                id: 3,
                show: 'Firefly'
            }, {
                id: 4,
                show: 'Star Trek'
            }, {
                id: 5,
                show: 'Star Wars: Christmas Special'
            }]
        });

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Sci-Fi Television',
            //width: 400,
            //height: 800,
            layout: 'fit',
            padding: 8,
            frame: true,
            //resizable: true,

            // layout: {
            //     type: 'vbox',
            //     align: 'stretch',
            // },

            items: [{
                xtype: 'form',
                items: [{
                    xtype: 'tagfield',
                    fieldLabel: 'Select a Show',
                    store: shows,
                    displayField: 'show',
                    valueField: 'id',
                    queryMode: 'local',
                    filterPickList: true
                }, {

                    xtype: 'textareafield',
                    //labelAlign: 'top',
                    //grow: true,
                    fieldLabel: 'Some label',
                    anchor: '100%',
                    style: 'margin-bottom: 10px;',
                    fieldStyle: 'resize: vertical;',
                    listeners: {
                        afterrender: function (resizable) {
                            console.log('afterrender');
                            var formPanel = resizable.up('form');
                            // formPanel.setHeight(formPanel.body.getHeight() + formPanel.getFrameHeight());
                            console.log(formPanel.findParentByType('panel'));
                            function outputsize() {
                                //console.log(resizable.getHeight());
                                formPanel.findParentByType('panel').updateLayout();
                            }

                            console.log(resizable);
                            new ResizeObserver(outputsize).observe(resizable.getEl().dom);
                        }
                    }
                }, {
                    xtype: 'tagfield',
                    fieldLabel: 'Select a Show',
                    store: shows,
                    displayField: 'show',
                    valueField: 'id',
                    queryMode: 'local',
                    filterPickList: true
                }]
            }],

        });
    }
});

几点：

• 我使用

  resizable: vertical;

  样式
使文本区域可垂直调整大小
• 我将表单放置在另一个具有

  layout: 'fit'

  的面板中，因为我希望此面板能够扩展以适应表单面板的内容
• 我使用此处找到的信息为文本区域添加了一个调整大小侦听器：https://stackoverflow.com/a/39312642/832783。侦听器只需更新父面板的布局，然后调整其大小以包含表单面板的全部内容。