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

用下面的代码：如何在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();

此标签文字重叠输入部分（对不起，没有足够的信誉分，张贴图片）。我试过用各种组合的'cls'，'labelStyle'，'style'和'width'，但它们似乎都被忽略（至少在正确设置标签宽度方面）。
我将项目动态添加到表单中，并且我想为每个元素定制标签宽度。在其他元素上，我不想为标签预留100px的默认空间 - 我想要的更少。这是可能的标准文本框，或者我必须创建一个自定义组件才能做到这一点？

感谢您提供的任何见解。

来源

2010-11-04 Gerrat

labelWidth是FormPanel的配置，而不是Field。它在表单布局级别进行呈现和控制，而不是在每个单独字段的级别。标签元素本身与字段容器的布局无关 - 如果查看标记，标签将浮动，并且包含div的字段具有左填充，这会给出您要控制的“标签宽度” 。该填充作为动态样式添加到包装输入的.x-form-element中（通过布局）。要覆盖你将不得不覆盖布局代码（不是微不足道的），或者可能使用覆盖每个字段的填充（使用您的字段的ID或您应用的自定义cls）的!important类。

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

来源

2010-11-04 21:07:58

谢谢您的回答和见解。正如你和Shea（下文）提到的那样，标准宽度是一致的。正如我所提到的，表单项（＆标签）是动态添加的。该表格可以包含任意数量的任意长度的标签。当表单只有一个短标签时，给标签一个非常大的宽度看起来并不美观。感谢您指引我朝着正确的方向（标签的容器）。我最终在它的容器上设置了{labelAlign：'right'}（并确保它有一个表单布局）。 – Gerrat 2010-11-12 21:50:51

如果您确实需要这样做，最简单的方法是定义一个面板而不是表单字段，并将其用作不同的容器。

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

来源

2010-11-05 04:53:25

不需要使用'面板'，一个简单的'盒子'就可以做到。 “箱子”的开销也较少。但是就像Brian所说的，从UI的角度来看，这对标签的宽度有很大的不同。 – 2010-11-05 15:47:32

我所做的是简单地设置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 
}

来源

2012-02-24 01:48:20

最终，你必须破解的领域AfterRender阶段的选项：几个CSS类后

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}) 
},

来源

2012-07-23 12:06:59

我试试这个做同样的工作，我没有删除所有的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 
}

和平

来源

2015-08-26 18:48:32 legrandmawak

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

回答

相关问题