extjs4 - 显示字段值格式不正确

Question

我有一个带有表格布局的表单，每个单元格内都有一个 displayfield，在初始化表单时没有值。这些值稍后会添加到 loadData 函数中。

我将一组数据传递给 loadData 函数并调用 form.setValues()。所有的数据项都是简单的字符串，但是其中一些有一个空格，例如“我的数据”。

我的问题是，当 setValue() 方法设置 displayfield value 时，它会将空格视为换行符并将字符串的后续部分放在第一部分下方的线上。

单元格足够大以容纳字符串的大小，因此不应有自动换行。我想尝试设置表格行高，这样 setValue() 方法就不会改变它，但我似乎无法找到一种方法来做到这一点。有没有人知道如何解决这个问题？

这是我的代码:

initComponent: function() {
    this.dockedItems = [
        { 
            xtype: form,
            layout: {
                type: 'table',
                columns: 4
            },
            defaults:{
                xtype:'displayfield',
                labelWidth: 120
            },
            items:[
                {
                  fieldLabel: 'My Field',
                  name: 'myField'
                },
            //... more items added here
            ],
        }
    ];
    this.callParent(arguments); // other docked items added in parent
},


loadData : function(record, parent) {
    this.callParent(arguments);
    var formItem = this.dockedItems.items[0];
    var form = formItem.getForm();
    form.setValues(record.data);
},

感谢您提供的任何帮助。

Answer 1

这是每个项目的宽度问题，最初您的值是空的，并且表格呈现为字段宽度或多或少等于字段标签。不幸的是，Ext 表格布局没有设置来计算表格单元格宽度以平均划分其面板宽度(或者我找不到)。尽管如此，您还是可以设置默认的“显示字段”宽度，这将强制表格布局最初使单元格变大。像这样:

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            layout: {
                type: 'table',
                columns: 3
            },
            defaults:{
                xtype:'displayfield',
                labelWidth: 120,
                width: 240
            },
            items: [{
                fieldLabel: 'My Field',
                name: 'myField'
            },{
                fieldLabel: 'Home',
                name: 'home_score'
            },{
                fieldLabel: 'Visitor',
                name: 'visitor_score'
            }],
            buttons: [{
                text: 'Update',
                handler: function() {
                    this.up('form').getForm().setValues({
                        myField: 'My text field with white spaces',
                        home_score: '10 123.12',
                        visitor_score: '150 123.789'
                    });
                    this.up('form').forceComponentLayout();
                }
            }]
        });
    }
});

注意按钮处理函数中的 this.up('form').forceComponentLayout(); 行，它会在表单数据更改后强制面板重新布局。

您发布了 this created jsFiddle这样您就可以使用它进行现场演奏。