Reusing forms to display data

Question

I created a large form panel for creating and editing user data. In the application, I also need to add a button that says "see details" to display the same information that is entered by the form panel.

I can make all the elements of the form readonlyand fill them with user data. But I think that it will not be so convenient. How can I store all labels and replace all fields with their equivalent values ​​in plain text?

Answer 1

I suggest using the method as you described. That is, disable the fields. But apply custom CSS styles for disabled fields. For instance. remove borders for textfields.
I used this way, but with ExtJs 3.x I don’t think it is very different from version 4.

Answer 2

There are several ways you can solve the problem:

• Disable your fields, but this is not so, because users cannot copy data from fields

• If you use Ext4 +, you can set the ReadOnly fields, which is good enough

• Stay as is, but hide the button to save, change the title to "Description", also in this you will need to check the serveride methods to enable or disable data changes.

The best way, I think, is to set a read-only field.

Answer 3

, . , . , .

• use setDisabled(true) ExtJs 4.0
• use setReadOnly(true) ExtJs 3.4
• CSS.

• ExtJs 4.0

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

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

MyApp.factory.PopupFactory.showReadonlyPopup(_yourFormpanel_); .

, , , .

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();
    }
});