Question

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

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

Answer 1

我建议使用你所描述的方式。即禁用字段。但是将自定义css样式应用于禁用的字段。例如。删除textfields的边框。
我已经习惯了这种方式，但是对于ExtJs 3.x，不要认为它与4版本有很大不同。

Answer 2

在这方面你有办法解决问题：

禁用您的字段，但它不是用户友好的，导致用户无法从字段中复制数据
如果使用Ext4 +你可以setReadOnly字段，这已经足够了
保持原样，但隐藏按钮进行保存，将标题更改为＆＃34;说明＆＃34;，同样在此您需要检查服务器端方法以允许或禁止更改数据。

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

Answer 3

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

使用setDisabled(true)可从ExtJs 4.0
使用setReadOnly(true)可从ExtJs 3.4
应用自定义CSS。
在ExtJs 4.0中禁用控件的另一种方法

myPanel.query（＆＃39; .field，.button＆＃39;）。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_);添加到按钮的处理程序。

此代码正在创建包含内容的弹出窗口，并将其添加到formpanel，因此如果您想稍后打开它，那么它只会替换值。

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

重用表单以显示数据

4 个答案: