Question

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

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

我猜，这可以通过两个相同的形式来实现，一个是可编辑的，一个是非，一个或另一个是可见的，基于用户点击了按钮。或许，另一种方法是在单击按钮时动态选择xtype。

为了做到这一点，有人可以指向某个方向吗？我是ExtJS的新手，刚开始学习ExtJS4。

提前谢谢。

微米。

Answer 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

Answer 2

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

Answer 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;
    }
}

}）;

Answer 4

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

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

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

4 个答案: