Как я могу установить ширину надписей на отдельных надписях текстового поля в 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

В конце концов, у вас есть возможность взломать 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 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
}

• peace

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
}