Как установить ширину метки на отдельные метки полей в extjs?

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, есть левое заполнение, которое дает «ширину ярлыка», которую вы пытаетесь контролировать , Это дополнение добавляется в код (по макету) в качестве динамического стиля в .x-form-element, который обертывает вход. Чтобы переопределить, вам придется либо переопределить код макета (нетривиальный), либо использовать класс !important, который переопределяет заполнение для каждого поля (используя идентификатор вашего поля или пользовательский 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

То, что я просто установить 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 4

В конце концов, у вас есть возможность взломать afterRender поля:

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

я стараюсь это после нескольких классов 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 
} 

• мир