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}
    ]
}

Answer 3

最终，你可以选择破解该领域的后卫：

afterRender: function() {
    <PARENT>.prototype.afterRender.call(this);
    this.adjustCustomLabelWidth(300);
},
adjustCustomLabelWidth: function(w) {
    this.el.parent('.x-form-item').child('.x-form-item-label').
            setStyle('width', w);
    this.el.parent('.x-form-element').setStyle('padding-left', w + 5);
    this.ownerCt.on('afterlayout', function() {  
        this.el.setStyle('width', this.el.getWidth() - w + 100);
    }, this, {single: true})
},

Answer 4

我在几个CSS类之后尝试做同样的工作，之后我确实删除了所有的CSS，就像一个魅力。

{
    xtype: 'whatever-with-a-field-label',
    name: 'veryMeaningFullName',
    fieldLabel: 'very long description to show above a tiny text field', 
    labelStyle: 'width:400px; white-space: nowrap;', 
    //could use width:100% if you want
    maxWidth: 20
}

和平

Answer 5

我所做的只是将labelWidth设置为空字符串并让它浏览器做它的工作。 ; - ）

{
    id: 'date0'
    ,fieldLabel: 'Start'
    ,labelWidth: ''
    ,xtype: 'datefield'
    ,emptyText: 'Select a start date'
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration)
    // ,width: 100
}

Answer 6

添加以下属性：

labelWidth: 'auto',
labelAlign: 'right',
labelStyle: 'white-space: nowrap;',

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

6 个答案: