setReadOnly and SetDisabled not working Ext JS 7.0.0

Question

I have a window with a form in it and pops up on click of an item in the grid. Inside the window, there is an edit button that would make the fields to setReadOnly(false). Here is the button:

onEdit: function () {

    this.moviePopupWindow = Ext.create('MovieRental.view.MovieDetailsPopUpView');
    this.movieForm = this.moviePopupWindow.down('#movieForm');
    var saveButton = this.movieForm.down('[itemId="saveBtn"]');
    var selected = localStorage.getItem('formValues');


    this.movieForm.down('[name="Title"]').setReadOnly(false);
    this.movieForm.down('[name="Genre"]').setReadOnly(false);
    this.movieForm.down('[name="Description"]').setReadOnly(false);
    this.movieForm.down('[name="Status"]').setReadOnly(false);
    this.movieForm.down('[name="Price"]').setReadOnly(false);

    this.moviePopupWindow.updateLayout();
    saveButton.setDisabled(false);
    console.log(localStorage.getItem('formValues'));
},

However, the fields is still in readonly even though the button is pressed. I tried showing the window again and although it is editable, the values of the form is gone (the form is pre-filled with the data from the grid). And the previous form is still showing.

Here are the things I tried:

~ .updateLayout() - not working. no error in console. ~ I tried to close the previous window and open a new one but no luck. For some reason, the .close() is not working. .destroy() is also not working.

I know its a sounds simple, but I'm really stuck here. Any ideas?