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表格布局没有设置来计算表格单元格宽度以均等地划分其面板宽度（或者我找不到一个）。您可以设置默认的“displayfields”宽度，这将迫使表格布局最初渲染单元格更大。像这样：

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，因此您可以使用它进行直播。

显示字段值格式不正确

1 个答案: