Extjs经典:resizable=true的文本区域无法调整大小

vaqhlq81  于 2023-01-20  发布在  其他
关注(0)|答案(1)|浏览(334)

我创造了这个小提琴:如果你运行它,你会发现你不能调整文本区域的大小,即使它有属性resizable: true。https://fiddle.sencha.com/#view/editor&fiddle/3mh2. If you run it, you'll see you cannot resize the textarea even though it has the property 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,行)如果我单击Run按钮并将鼠标悬停在上面,我会得到灰色条。

在另一个表单中,无论我将鼠标悬停在哪里,灰色条都不会显示。
但是...如果我包含grow: true,我会在UI中得到一些奇怪的混合-灰色条最终显示,但位置不正确。

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

rhfm7lfc

rhfm7lfc1#

您可以通过以下几个步骤来实现此功能:
1.为表单面板指定vbox布局(调整面板大小时,需要align: 'stretch'来水平拉伸表单域)。
1.将textareafield Package 成fit布局的container,并在容器上设置resizable,而不是在文本区域上设置。
1.你可以在resizer中设置更多的参数,如果你使用的不是true,而是一个定义Ext.resizer.Resizer的对象,选中documentation的所有配置选项(pinned可能是一个好主意,总是显示调整大小处理程序)。
至于第2步,我不能告诉你为什么没有容器它不能工作,但根据文档链接abocve,textarea resizer是有点不同,这可能是原因,但我只能猜测:
Textarea和img元素将被一个额外的div Package ,因为这些元素不支持子节点。
这种解决方案的一个缺点是,调整大小句柄不仅出现在textarea的下面,而且出现在整个容器的下面,但这是我所能得到的最远的。我在textarea上尝试了labelAlign: 'top',但它在调整大小时在标签下面添加了一些空间。

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

相关问题