如何在 extjs 中设置各个文本字段标签的标签宽度？
使用以下代码：
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 空间 - 我想要更少。这对于标准文本字段来说是可能的，还是我必须创建一个自定义组件才能做到这一点？
感谢您提供的任何见解。
with the following code:
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();
This label text overlaps the input section (sorry not enough reputation points to post an image).
I've tried using css with various combinations of: 'cls', 'labelStyle', 'style', and 'width' but they all seem to be ignored (at least in terms of setting the label width properly).
I am adding items to a form dynamically, and I want custom label width's for each element. On other elements, I don't want the default 100px space it reserves for the label - I want less. Is this possible with the standard textfield, or do I have to create a custom component just to do this?
Thanks for any insight provided.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
labelWidth是FormPanel的配置，而不是Field的配置。它是在表单布局级别呈现和控制的，而不是在每个单独字段的级别。 label 元素本身与字段容器的布局无关 - 如果您查看标记，标签是浮动的，并且字段的包含 div 具有左填充，它提供了您试图控制的“标签宽度” 。此填充在代码中（通过布局）作为动态样式添加到包装输入的.x-form-element中。要覆盖，您要么必须覆盖布局代码（不是微不足道的），要么使用!important类来覆盖每个字段的填充（使用字段的 id 或自定义cls代码>您应用的）。也就是说，从美观的角度来说，标签宽度应该相同。不确定为什么要打破这个约定？
labelWidthis a config ofFormPanel, not ofField. It is rendered and controlled at the form layout level, not at the level of each individual field. The label element itself has nothing to do with the layout of the field container -- if you look at the markup, the label is floated and the field's containing div has left-padding that gives the "label width" you're trying to control. This padding is added in code (by the layout) as a dynamic style to the.x-form-elementthat wraps the input. To override you'll either have to override the layout code (not trivial) or perhaps use an!importantclass that overrides the padding per field (using your field's id or a customclsthat you apply).That said, the label widths should be the same, aesthetically-speaking. Not sure why you'd want to break that convention?
如果您确实必须这样做，最简单的方法是定义一个面板而不是表单字段，并将其用作不同内容的容器。
If you really have to do this, the easiest way is to define a panel instead of a form field and use it as a container for something different.
最终，您可以选择破解该字段的 afterRender ：
Eventually, you have the option to hack afterRender of the field :
我在几个 CSS 类之后尝试这样做来完成相同的工作，
之后我确实删除了所有CSS，效果就像一个魅力。
I try this after several CSS classes to do the same job,
I did remove all css after this, works like a charm.
我所做的只是将 labelWidth 设置为空字符串，然后让
浏览器来完成它的工作。 ;-)
What I did is simply set labelWidth to an empty string and let the
browser to do its job. ;-)
添加这些属性：
Add these properties: