Làm cách nào để đặt độ rộng nhãn trên nhãn trường văn bản riêng lẻ trong extjs?

Question

với đoạn mã sau:

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(); 

văn bản Nhãn này chồng lên phần đầu vào (xin lỗi không đủ điểm uy tín để gửi một hình ảnh).

Tôi đã thử sử dụng css với các kết hợp khác nhau: 'cls', 'labelStyle', 'style' và 'width' nhưng tất cả dường như bị bỏ qua (ít nhất là về thiết lập chiều rộng nhãn đúng cách) .
Tôi đang thêm các mục vào một biểu mẫu động và tôi muốn chiều rộng của nhãn tùy chỉnh cho mỗi phần tử. Trên các yếu tố khác, tôi không muốn khoảng trống 100px mặc định mà nó dự trữ cho nhãn - tôi muốn ít hơn. Điều này có thể xảy ra với trường văn bản chuẩn hay tôi phải tạo một thành phần tùy chỉnh chỉ để thực hiện việc này?

Cảm ơn bạn đã cung cấp thông tin chi tiết.

Answer 1

labelWidth là cấu hình của FormPanel, không phải là Field. Nó được hiển thị và được kiểm soát ở cấp bố trí biểu mẫu, không phải ở cấp độ của từng trường riêng lẻ. Bản thân phần tử nhãn không có gì liên quan đến bố trí của vùng chứa - nếu bạn nhìn vào đánh dấu, nhãn được thả nổi và trường chứa div có phần đệm bên trái cung cấp "chiều rộng nhãn" bạn đang cố gắng kiểm soát . Phần đệm này được thêm vào trong mã (theo bố cục) dưới dạng kiểu động với .x-form-element để bao bọc đầu vào. Để ghi đè, bạn sẽ phải ghi đè mã bố cục (không tầm thường) hoặc có thể sử dụng lớp !important ghi đè vùng đệm cho mỗi trường (sử dụng id trường của bạn hoặc tùy chỉnh cls mà bạn áp dụng).

Điều đó nói rằng, chiều rộng nhãn nên giống nhau, về mặt thẩm mỹ. Bạn không chắc chắn tại sao bạn muốn phá vỡ quy ước đó?

Answer 2

Nếu bạn thực sự phải làm điều này, cách dễ nhất là xác định bảng thay vì trường biểu mẫu và sử dụng nó làm vùng chứa cho mục đích khác.

{ 
    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

Điều tôi đã làm đơn giản là đặt labelWidth thành chuỗi trống và để trình duyệt thực hiện công việc của mình. ;-)

{ 
    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 4

Cuối cùng, bạn có tùy chọn để hack afterRender của lĩnh vực này:

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 5

tôi cố gắng này sau vài lớp CSS để thực hiện công việc tương tự, tôi đã loại bỏ tất cả css sau công việc này như một cái duyên vậy.

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

• hòa bình