sencha-touch-2 - 在字段集中包装长标题？

Question

如何在表单和字段集中包装很长的标题？

我从 Sencha 的文档中获取了这段代码，并简单地添加了一个长标题，并添加了一个宽度。不幸的是，标题被省略号截断。

这是它的样子：

这是修改后的 Sencha 源：（http://docs.sencha.com/touch/2.2.1/#!/api/Ext.form.FieldSet）

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'How much wood would a woodchuck chuck if a woodchuck could chuck wood?',
            width: 300,
            instructions: 'Tell us all about yourself',
            items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name'
                },
                {
                    xtype: 'textfield',
                    name : 'lastName',
                    label: 'Last Name'
                }
            ]
        }
    ]
});

Answer 1

尝试Ext.field.Field labelWrap 配置。

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'How much wood would a woodchuck chuck if a woodchuck could chuck wood?',
            width: 300,
            instructions: 'Tell us all about yourself',
            items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name',
                    labelWrap : true
                },
                {
                    xtype: 'textfield',
                    name : 'lastName',
                    label: 'Last Name',
                    labelWrap : true
                }
            ]
        }
    ]
});

编辑

对不起，我误读了其中的一部分。

我绝不会声称自己是 CSS 专家……但这对我有用：

.x-form-fieldset-title {
    white-space: normal;
}

这将影响您的每个标题，您可能想尝试只挑出太长的标题。

祝你好运，布拉德