如何呈现响应式 Ext.form.TextArea

Posted 2023-02-26

【中文标题】如何呈现响应式 Ext.form.TextArea

【英文标题】：How to render responsive a Ext.form.TextArea

【发布时间】：2017-10-12 09:12:37

【问题描述】：

我需要一些关于带有 textarea 字段的表单的帮助。

我的问题。

我有一个简单的 Ext.window，我在其中放置了一个 Ext.FormPanel。在这个 Ext.FormPanel 中，我放置了一个 Ext.form.FieldSet，其中放置了一些字段。其中一个字段是 textarea (Ext.form.TextArea)， 现在，我的目标是在我调整 Ext.window 大小时响应此文本区域。

有可能获得这种行为吗？

这是我当前的代码：

Ext.FormPanel 所在的窗口

var    win = new Ext.Window(
    id:'winTest',
    layout:'fit',
    modal:true,
    title:'Title',
    width:590,
    height:300,
    closeAction:'close',
    plain: true,
    autoScroll: true,
    items:[form],
    listeners: 
        'beforeclose': function (p) 
        
    
);

Ext.FormPanel 驻留在其中的 Ext.form.FieldSet

var form = new Ext.FormPanel(
    id:'FormTest',
    layout : 'form',
    width:510,
    labelAlign: 'right',
    labelWidth: 120,
    autoScroll:true,
    bodyStyle:'padding:2px;background-color:#E9EFF8;',
    monitorValid:true,
    waitMsgTarget: true,
    border: true,
    bodyBorder: true,
    trackResetOnLoad:true,
    items: [fieldset]
);

我在其中放置了一些文件的字段集

var fieldset = Ext.form.FieldSet(
    id:'fsTest',
    autoHeight: true,
    defaultType: 'textfield',
    items:[.....,textarea]
    //boxMaxWidth:450
    //border:true    
)

Textarea放在fieldset中（简称，我只报告了textarea）

var textarea = new Ext.form.TextArea(
    id:'textareaTest',
    name:'TextArea',
    fieldLabel:'Insert',
    hidden:false,
    width:310,
    height:60,
    maxLength:500,
    allowBlank: true
);

感谢您的宝贵帮助。

洛伦佐。

【参考方案1】：

应该是这样的：-

var win = new Ext.Window(
    id: 'winTest',
    layout: 'vbox',
    modal: true,
    title: 'Title',
    width: 590,
    height: 300,
    closeAction: 'close',
    plain: true,
    autoScroll: true,
    items: [
        xtype: 'form',
        id: 'FormTest',
        flex: 1,
        layout: 'vbox',
        width: 510,
        labelAlign: 'right',
        labelWidth: 120,
        autoScroll: true,
        bodyStyle: 'padding:2px;background-color:#E9EFF8;',
        monitorValid: true,
        waitMsgTarget: true,
        border: true,
        bodyBorder: true,
        trackResetOnLoad: true,
        items: [
            xtype: 'fieldset',
            id: 'fsTest',
            //autoHeight: true,
            flex: 1,
            layout: 'vbox',
            //defaultType: 'textfield',
            items: [
                    xtype: 'textarea',
                    flex: 1,
                    id: 'textareaTest',
                    name: 'TextArea',
                    fieldLabel: 'Insert',
                    hidden: false,
                    width: 310,
                    //height: 60,
                    maxLength: 500,
                    allowBlank: true
                ]
                //boxMaxWidth:450
                //border:true
        ]
    ]
).show();

请看看这个example

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

感谢您的信息和支持，我添加了代码 sn-p。