使用 ExtJS4 从文本字段切换到显示字段答案

【问题标题】：Switch from textfield to displayfield with ExtJS4使用 ExtJS4 从文本字段切换到显示字段
【发布时间】：2012-01-09 22:24:17
【问题描述】：

我创建了一个在普通显示字段中显示值的表单。

表单旁边有一个“编辑”按钮，一旦用户单击，显示字段应切换为文本字段，从而使数据可编辑。

我猜，这可以通过使用两种相同的表单来实现，一种是可编辑的，一种是不可编辑的，另一种是可见的，这取决于用户点击了按钮。也许另一种方法是在单击按钮时动态选择 xtype。

任何人都可以将我指向某个方向以执行此操作吗？我是 ExtJS 的新手，刚刚开始学习 ExtJS4。

提前谢谢你。

【问题讨论】：

切换可见性是一个非常好的方法。切换 xtype 将不起作用，它们仅用于初始化。
如何禁用这些字段，然后在编辑模式下启用它们？

标签： extjs extjs4 textfield

【解决方案1】：

首先将所有字段呈现为禁用：true 的输入字段。然后将其用于编辑按钮处理程序：

 ...
 form.getForm().getFields().each(function(field) {
             field.setDisabled( false); //use this to enable/disable 
             // field.setVisible( true); use this to show/hide
 }, form );//to use form in scope if needed

【讨论】：

这应该很好用！我今天没有时间尝试，但明天会做，然后会报告。谢谢！
它按预期工作，但在样式方面，它看起来不像我需要的那样。理想情况下，我希望它从文本字段切换到输入字段。无论如何，这是朝着正确方向迈出的一步，再次感谢。
真正的替代方案是在卡片布局中有 2 个面板（意味着一次只显示一个）。一个面板是包含用于编辑的输入字段的表单面板，而另一个是带有 xtemplate 的普通面板，用于以只读模式呈现数据。您可以为此想出一些比普通的 xtemplate 更有创意的东西，但这是一般的想法。

【解决方案2】：

Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);

【讨论】：

这对我来说比禁用该字段更好。因为我想要在两种状态之间切换，所以我添加了一个样式类并删除并添加了基于“焦点”和“模糊”的类

【解决方案3】：

您可以根据属性 isEditable 进行切换。然后，当您单击按钮时，您会更改属性并删除并添加表单。如果您来回切换，它会更干净。

Ext.define('E.view.profile.information.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',

title: 'Form',
layout: 'fit',

initComponent: function () {
    this.items = this.buildItems();
    this.callParent();
},

buildItems: function () {
    return [this.buildInvestmentPhilosophy()];
},

buildInvestmentPhilosophy: function () {
    var field = {
        name: 'investmentPhilosophy',
        xtype: 'displayfield',
        editableType: 'textarea',
        grow: true,
        maxLength: 6000,
        value: '---',
        renderer: E.Format.textFormatter
    };
    this.toggleEditingForForm(field);
    return field;
},

toggleEditingForForm: function (form) {
    if (this.isEditable) {
        Ext.Array.each(form, this.configureFieldForEditing, this);
    }
},

configureFieldForEditing: function (field) {
    if (field.editableType) {
        field.xtype = field.editableType;
    }
}

});

【讨论】：

【解决方案4】：

您还可以尝试拥有两个项目：具有相同数据源的显示字段和文本字段，您可以使用按钮处理程序隐藏/显示正确的项目。你不应该有任何 CSS 问题

（如果你没有 CSS 问题，我很乐意看到你的代码）

【讨论】：