重用表单来显示数据答案

【问题标题】：Reusing forms for displaying data重用表单来显示数据
【发布时间】：2014-06-13 16:20:42
【问题描述】：

我已经实现了一个用于创建和编辑用户数据的大型表单面板。在应用程序中，我还应该添加一个标记为“查看详细信息”的按钮，以显示表单面板输入的相同信息。

我可以制作所有表单元素readonly 并用用户数据填充它们。但我认为它不会那么用户友好。如何保留所有标签并用纯文本中的对应值替换所有字段？

【问题讨论】：

“它不会对用户友好”是什么意思？什么是简单的文本格式？对应值是什么？

标签： forms extjs extjs4 reusability

【解决方案1】：

我建议使用您描述的方式。 IE。禁用字段。但是将自定义 css 样式应用于禁用的字段。例如。删除 textfields 的边框。
我用过这种方式，但是用ExtJs 3.x，不要觉得和4版本有太大区别。

【讨论】：

【解决方案2】：

在这你有一些解决问题的方法：

禁用您的字段，但这不是用户友好的，导致用户无法从字段中复制数据
如果使用Ext4+可以setReadOnly字段就够了
保持原样，但隐藏按钮以保存，将标题更改为“描述”，在此您还需要检查服务器端方法以允许或禁止更改数据。

我认为最好的方法是将字段设置为只读。

【讨论】：

【解决方案3】：

如果我是你，我会创建一个新页面。我认为这是一种更清洁的方法。如果没有，那么您有以下选项。

使用 setDisabled(true) 可从 ExtJs 4.0 获得
使用 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

【讨论】：

【解决方案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();
    }
});

【讨论】：