Cambiar de campo de texto a displayfield con ExtJS4

textfield

Question

Creé un formulario que muestra valores en campos de visualización simples.

Hay un botón de "editar" al lado del formulario y, una vez que el usuario hace clic en él, los campos de visualización deben cambiar a campos de texto y, por lo tanto, hacer que los datos sean editables.

Esto, supongo, se lograría teniendo dos formularios idénticos, uno editable y otro no, y uno u otro serían visibles, según el usuario que haya hecho clic en el botón. Otra forma, tal vez, es tener el xtype seleccionado dinámicamente al hacer clic en el botón.

¿Alguien puede dirigirme hacia cierta dirección para hacer esto? Soy un completo novato en ExtJS y recién comencé a aprender ExtJS4.

Gracias de antemano.

METRO.

Answer 1

Comience representando todos los campos como campos de entrada con deshabilitado: verdadero. Luego, use esto para el manejador del botón Editar:

 ...
 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

Puede alternar según una propiedad que sea editable. Luego, cuando haces clic en el botón, cambias la propiedad y simplemente eliminas y agregas el formulario. Lo hace más claro si está cambiando de un lado a otro.

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

También puede tratar de tener dos elementos: un campo de visualización y un campo de texto con la misma fuente de datos y puede ocultar / mostrar el elemento correcto con su manejador de botones. No deberías tener ningún problema de CSS

(Si no tienes problemas de CSS, me gustaría ver tu código)