如何呈现响应式 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的主要内容,如果未能解决你的问题,请参考以下文章