将文本字段更改为文本区域字段答案

【问题标题】：Change textfield to textareafield将文本字段更改为文本区域字段
【发布时间】：2019-07-16 13:31:54
【问题描述】：

我需要根据条件将 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}'
                }
              }]]
              })

【问题讨论】：

标签： javascript extjs extjs6 extjs6-modern extjs6.2

【解决方案1】：

完全正确：您不能以这种方式绑定 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}'}
    }]
});

【讨论】：