如何在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中的單個文本字段標籤上設置標籤寬度？

回答

相關問題