javascript - 将文本字段更改为文本区域字段
问题描述
我需要根据条件将 xtype 从 textfield 更改为 textareafield。我需要做这样的事情,但我不能更新 xtype
Ext.define('app',{
launch: function(){
var i = 1;
if (i == 1) {
Ext.getCmp('myID').updateXtype('textareafield')
}
},
items:[{
xtype: 'fieldset',
title: 'title'
},
items: [{
xtype: 'textfield',
label: 'label'
}]]
})
或者我可以使用视图模型,但 xtype 不可绑定
Ext.define('app',{
launch: function(){
var i = 1;
if (i == 1) {
this.getViewModel().set('newXtype', 'textareafield');
}
},
items:[{
xtype: 'fieldset',
title: 'title'
},
items: [{
xtype: 'textfield',
label: 'label',
bind: {
xtype: '{newXtype}'
}
}]]
})
解决方案
确切地说:您不能以这种方式绑定 xtype。在这种情况下,我会使用hidden
绑定。textfield
您将使用和 构建表单textareafield
。hidden
然后根据您的用例(条件)切换绑定。
https://fiddle.sencha.com/#view/editor&fiddle/2trf
Ext.create('Ext.form.Panel', {
title: 'Switch between textfield and textareafield',
width: 360,
bodyPadding: 10,
renderTo: Ext.getBody(),
viewModel: {
data: {
showTextfield: true
}
},
defaults: {labelWidth: 120},
tbar: [{
text: 'Switch',
handler: function(button) {
let vm = this.up('panel').getViewModel();
let showTextfield = vm.get('showTextfield');
vm.set('showTextfield', !showTextfield)
}
}],
items: [{
xtype: 'textfield',
fieldLabel: 'TEXTFIELD',
bind: { hidden: '{showTextfield}'}
},{
xtype: 'textareafield',
fieldLabel: 'TEXTAREAFIELD',
bind: { hidden: '{!showTextfield}'}
}]
});
推荐阅读
- c++ - 为什么入口点的地址与 NT 标头不匹配?
- python - 从 python 列表中删除重复项,以便保留最后一个实例
- jquery - jQuery 日期选择器 - 设置当前日期
- git - Git checkout commit 命令的工作方式类似于 git reset commit
- javascript - 在下拉菜单中截断文本长度
- string - 在 PostgreSQL 中将两列(日期类型和字符串类型)连接到同一张表中的另一列(时间戳类型)中
- rust - Rust TcpStream:::as_raw_fd 在 Windows
- python - 使用类时tkinter窗口未打开
- python - 带有等高线图的 FacetGrid
- python - Python:Phantomjs 找不到 chrome webdriver 工作正常的元素