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

Этот текст ярлыка перекрывает раздел ввода (извините, недостаточно очков репутации для публикации изображения).

Я пробовал использовать css с различными комбинациями: 'cls', 'labelStyle', 'style' и 'width', но все они, кажется, игнорируются (по крайней мере, с точки зрения правильной установки ширины меток).
Я добавляю элементы в форму динамически, и мне нужна индивидуальная ширина меток для каждого элемента. На других элементах я не хочу, чтобы пространство 100px по умолчанию было зарезервировано для метки - я хочу меньше. Возможно ли это со стандартным текстовым полем, или мне нужно создать пользовательский компонент только для этого?

Спасибо за предоставленную информацию.

Ответ 1

labelWidth является конфигурацией FormPanel, а не Field. Он отображается и контролируется на уровне макета формы, а не на уровне каждого отдельного поля. Сам элемент метки не имеет ничего общего с макетом контейнера поля - если вы посмотрите на разметку, метка плавает, а поле, содержащее div, имеет левое заполнение, которое дает "ширину метки", которую вы пытаетесь контролировать, Это дополнение добавляется в код (по макету) в виде динамического стиля в .x-form-element, который обертывает ввод. Чтобы переопределить, вам придется либо переопределить код макета (не тривиально), либо использовать класс !important, который переопределяет дополнение для каждого поля (используя ваш идентификатор поля или пользовательский cls, который вы применяете).

Тем не менее, ширина меток должна быть одинаковой, эстетически говорящей. Не знаете, почему вы хотели бы разорвать это соглашение?

Ответ 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}
    ]
}

Ответ 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})
},

Ответ 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
}

мир

Ответ 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
}