如何在extjs中的单个文本字段标签上设置标签宽度？

Question

使用以下代码:

var win = new Ext.Window({
    xtype: 'form',
    layout: 'form',
    items: [{
        xtype: 'textfield',
        value: 'test',
        name: 'testing',
        labelWidth: 200,
        fieldLabel: 'This is a really, really long label here',
        labelStyle: 'white-space: nowrap;'
    }]

}).show();

此标签文本与输入部分重叠(抱歉没有足够的信誉点来发布图像).

我尝试过使用各种组合的css:'cls','labelStyle','style'和'width'但它们似乎都被忽略了(至少在正确设置标签宽度方面).
我正在动态地向表单添加项目,我希望每个元素的自定义标签宽度.在其他元素上,我不希望它为标签保留默认的100px空间 - 我想要更少.这是否可以使用标准文本字段,或者我是否必须创建自定义组件才能执行此操作？

感谢您提供的任何见解.

Answer 1

labelWidth是配置FormPanel,而不是Field.它在表单布局级别进行渲染和控制,而不是在每个单独字段的级别进行渲染和控制.标签元素本身与字段容器的布局无关 - 如果查看标记,标签将浮动,并且包含div的字段具有left-padding,它提供了您试图控制的"标签宽度" .这个填充在代码中(通过布局)添加为.x-form-element包装输入的动态样式.要覆盖你要么必须覆盖布局代码(不是无关紧要),要么使用!important覆盖每个字段填充的类(使用你的字段的id或cls你应用的自定义).

也就是说,标签宽度应该是相同的,从美学角度讲.不知道你为什么要打破这个惯例？

Answer 2

如果你真的必须这样做,最简单的方法是定义一个面板而不是一个表单字段,并将其用作不同的容器.

{
    xtype: 'form',
    layout: 'form',
    labelWidth: 100,
    items: [
        // {some fields with labelWidth=100},
        {
            xtype: 'panel',
            layout: 'form',
            labelWidth: 200,
            items: [
                xtype: 'textfield',
                value: 'test',
                name: 'testing',
                fieldLabel: 'This is a really, really long label here',
                labelStyle: 'white-space: nowrap;'
            ]
        }
        // {some fields with labelWidth=100}
    ]
}