Reusing forms for displaying data

Question

I have implemented a large form panel for creating and editing users' data. In the application, I should also add a button, labeled "see details", to display the same information which are entered by the form panel.

I can make all form elements readonly and populate them by a user's data. But I think it will not be so user-friendly. How can I keep all labels and replace all fields by their counterpart values in plain text?

Answer 1

I suggest to use the way as you've described. I.e. disable fields. But apply custom css styles to the disabled fields. E.g. remove borders for textfields.
I've used this way, but with ExtJs 3.x, don't think that it is much different from 4 version.

Answer 2

In this you have some ways to solve problem:

1. Disable your fields, but it`s not userfiendly, cause users cant copy data from fields

2. If using Ext4+ you can setReadOnly fields, it is good enough

3. Stay as is, but hide button to save, change title to "Description", also in this you will need to check on serverside methods to allow or disallow changing data.

The best way, i think, is to set field just readOnly.

Answer 3

If I were you, I would create a new page. I think that's a cleaner approach. If not then you have following option.

1. use setDisabled(true) Available from ExtJs 4.0
2. use setReadOnly(true) Available from ExtJs 3.4
3. Apply custom CSS.

4. Another way to disable controls in ExtJs 4.0

   myPanel.query('.field, .button').forEach(function(c){c.setDisabled(true);});

in 3.X

myPanel.buttons.forEach(function(btn){btn.setDisabled(true);}); //disable all buttons
myPanel.getForm().items.each(function(itm){itm.setDisabled(true)}); //disable all fields

Answer 4

With the following code you only need to add MyApp.factory.PopupFactory.showReadonlyPopup(_yourFormpanel_); to the button's handler.

This code is creating a popup with the content, and adding this to the formpanel, so if you want to open it later on, then it is only replacing the values.

Ext.define('MyApp.factory.PopupFactory', {
    singleton:true, 
    (...)
    showReadonlyPopup: function(formpanel) {
        var fields = formpanel.getForm().getFields();
        if (formpanel.readonlyPopup == null) {
            var items = [];
            fields.each(function (item) {
                if (item.isHidden() == false) {
                    items.push({
                        xtype: 'displayfield',
                        fieldLabel: item.getFieldLabel != null ? item.getFieldLabel() : '',
                        hideLabel: item.hideLabel,
                        name: item.name,
                        labelWidth: item.getLabelWidth(),
                        value: item.getDisplayValue != null ? item.getDisplayValue() : item.getSubmitValue(),
                        width: item.getWidth()
                    });
                }
            });
            var popup = Ext.create('Ext.window.Window', {
                title: 'Details...',
                closeAction: 'hide',
                items: {
                    xtype: 'form',
                    layout: formpanel.initialConfig != null ? formpanel.initialConfig.layout : null,
                    items: items
                }
            });         
            formpanel.readonlyPopup = popup;    
            formpanel.on('destroy', function(form) {
                form.readonlyPopup.destroy();               
            })          
        } else {
            var values = {};
            fields.each(function (item) {
                values[item.name] = item.getDisplayValue != null ? item.getDisplayValue() : item.getSubmitValue();
            });
            formpanel.readonlyPopup.down('form').getForm().setValues(values);           
        }
        formpanel.readonlyPopup.show();
    }
});