extjs - 如何在 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'，但它们似乎都被忽略了(至少在正确设置标签宽度方面)。
我正在动态地向表单添加项目，并且我想要每个元素的自定义标签宽度。在其他元素上，我不想要它为标签保留的默认 100 像素空间 - 我想要更少。使用标准文本字段可以做到这一点，还是我必须创建一个自定义组件才能做到这一点？

感谢您提供的任何见解。

Answer 1

labelWidth是 FormPanel 的配置，不是 Field .它是在表单布局级别呈现和控制的，而不是在每个单独字段的级别。标签元素本身与字段容器的布局无关——如果你看一下标记，标签是 float 的，字段的包含 div 有左填充，它给出了你试图控制的“标签宽度” .此填充在代码中(通过布局)作为动态样式添加到 .x-form-element包装输入。要覆盖，您要么必须覆盖布局代码(不是微不足道的)，要么使用 !important覆盖每个字段的填充的类(使用您的字段的 id 或您应用的自定义 cls)。

也就是说，从美学角度来说，标签宽度应该相同。不知道你为什么要打破这个约定？