我创造了这个小提琴:如果你运行它,你会发现你不能调整文本区域的大小,即使它有属性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中得到一些奇怪的混合-灰色条最终显示,但位置不正确。
我怎样才能让这个表单看起来正确,并且仍然能够调整文本区域的大小。垂直调整文本区域的大小就足够了。
1条答案
按热度按时间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'
,但它在调整大小时在标签下面添加了一些空间。