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

Posted

技术标签:

【中文标题】如何呈现响应式 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。

以上是关于如何呈现响应式 Ext.form.TextArea的主要内容,如果未能解决你的问题,请参考以下文章

响应式布局流式布局

如何解决移动设备(Wordpress 主题)的“响应式设计模式”问题?

响应式布局

如何做出响应式的页面 (转)

Figma 新增响应式设计功能 breakpoint

12个最佳的响应式网页设计教程,轻松带你入门!