使用ExtJS4将文本框(textfield)切换为显示框(displayfield)

Question

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

表单旁边有一个“编辑”按钮，用户点击后，显示字段应该变成文本字段，从而使数据可编辑。

我猜想，这可以通过拥有两个相同的表单来实现，一个可编辑，一个不可编辑，基于用户是否点击按钮，其中一个表单将会显示。另一种方法是在单击按钮时动态选择xtype。

有人能指导我朝着某个方向做吗？我完全是ExtJS的新手，刚开始学习ExtJS4。

提前致谢。

M.

- Menelaos

---

切换可见性是一个非常好的方法。切换xtypes不起作用，它们仅用于初始化。 - suknic

禁用字段，然后在编辑模式下启用它们怎么样？ - JamesHalsall

Answer 1

首先将所有字段渲染为 disabled: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

- dbrin

---

这应该能够完美地工作！我今天没有时间尝试它，但明天会试一下并回报。谢谢！ - Menelaos

它按照预期工作，但在样式方面，它看起来不符合我的需求。理想情况下，我希望它从文本字段切换到输入字段。 无论如何，这是朝着正确方向迈出的一步，所以再次感谢。 - Menelaos

这里的真正替代方案是在卡片布局中使用2个面板（每次只显示一个）。其中一个面板是包含输入字段以进行编辑的表单面板，而另一个是带有xtemplate的普通面板，以只读模式呈现数据。您可以想出比纯粹的xtemplate更具创意的东西，但这是一般的想法。 - dbrin

Answer 2

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

- rada

---

对我而言，这比禁用字段的效果更好。由于我想在两种状态之间切换，所以我添加了一个样式类，并根据“焦点”和“模糊”来移除和添加该类。 - abhijit

Answer 3

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

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

- Meinew

Answer 4

您可以根据属性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;
    }
}

});

- technoSpino