Search code examples
extjsextjs4textfield

Switch from textfield to displayfield with ExtJS4

I have created a form that displays values in plain displayfields.

There is an "edit" button next to the form and once clicked by the user, the displayfields should switch to being textfields and will, therefore, make the data editable.

This, I am guessing, would be achieved by having two identical forms, one editable and one not and one or the other would be visible, based on the user having clicked the button. Another way, perhaps, is to have the xtype dynamically selected upon clicking the button.

Can anybody point me towards a certain direction in order to do this? I am a complete newbie to ExtJS and only just started learning ExtJS4.

Thank you in advance.

M.

Solution

  • Start by rendering all fields as input fields with disabled:true. Then use this for the Edit button handler:

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