web-dev-qa-db-fra.com

Comment définir la largeur d'étiquette sur des étiquettes de champs de texte individuelles dans extjs?

avec le code suivant:


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

Ce texte d'étiquette chevauche la section d'entrée (désolé, il n'y a pas assez de points de réputation pour publier une image).

J'ai essayé d'utiliser css avec différentes combinaisons de: 'cls', 'labelStyle', 'style' et 'width', mais elles semblent toutes être ignorées (du moins en termes de définition correcte de la largeur de l'étiquette).
J'ajoute des éléments à un formulaire de manière dynamique et je veux une largeur d'étiquette personnalisée pour chaque élément. Sur d’autres éléments, je ne veux pas de l’espace par défaut de 100px qu’il réserve pour l’étiquette - je veux moins. Est-ce possible avec le champ de texte standard ou dois-je créer un composant personnalisé pour le faire?

Merci pour toute idée fournie.

extjslabelwidth
11
Gerrat

labelWidth est une config de FormPanel et non de Field. Il est rendu et contrôlé au niveau de la présentation du formulaire, et non au niveau de chaque champ. L'élément label lui-même n'a rien à voir avec la disposition du conteneur de champ. Si vous regardez le balisage, le label est flottant et le champ contenant la div a un caractère de remplissage à gauche qui donne la "largeur du label" que vous essayez de contrôler . Ce remplissage est ajouté dans le code (par la mise en page) en tant que style dynamique au .x-form-element qui encapsule l'entrée. Pour remplacer, vous devez soit remplacer le code de présentation (non trivial), soit utiliser une classe !important qui remplace le remplissage par champ (à l'aide de l'ID de votre champ ou de la variable cls personnalisée que vous appliquez).

Cela dit, les largeurs d'étiquette devraient être identiques, esthétiquement parlant. Vous ne savez pas pourquoi vous voulez briser cette convention?

17
Brian Moeskau

Si vous devez réellement faire cela, le moyen le plus simple est de définir un panneau au lieu d'un champ de formulaire et de l'utiliser comme conteneur pour quelque chose de différent.

{
    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}
    ]
}
5
Donatas Olsevičius

Finalement, vous avez la possibilité de pirater afterRender du champ:

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})
},
2
Christophe Blin

J'essaie cela après que plusieurs classes CSS fassent le même travail, J'ai supprimé tous les CSS après cela, fonctionne comme un charme.

{
    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
}
  • paix 
1
legrandmawak

Ce que j'ai fait est simplement de définir labelWidth sur une chaîne vide et de laisser le navigateur Faire son travail. ;-)

{
    id: 'date0'
    ,fieldLabel: 'Start'
    ,labelWidth: ''
    ,xtype: 'datefield'
    ,emptyText: 'Select a start date'
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration)
    // ,width: 100
}
0
Lester Cheung