javascript - 将文本字段更改为文本区域字段

Question

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

或者我可以使用 View 模型，但 xtype 不可绑定(bind)

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}'
                }
              }]]
              })

Answer 1

确切地说:您不能以这种方式绑定(bind) xtype。在这种情况下，我会使用 hidden 绑定(bind)。您将使用 textfield 和 textareafield 构建表单。然后根据您的用例(条件)切换隐藏绑定(bind)。

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}'}
    }]
});