web-dev-qa-db-fra.com

ExtJS 4.2: Les info-bulles ne sont pas assez larges pour voir le contenu

Depuis la mise à niveau vers ExtJS 4.2, j'ai remarqué que les info-bulles affichées lorsqu'un champ de texte contenant une erreur ne sont pas assez larges pour afficher le contenu de l'info-bulle - elles semblent toujours avoir une largeur de 40 pixels.

Voici un cas de test qui montre le problème:

<html>
<head>
    <title>Field error tooltips</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.0/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.0/ext-all-debug.js"></script>
</head>
<body>
    <script type="text/javascript">
    Ext.onReady(function(){

        var form = Ext.create("Ext.form.Panel",{
            title: 'My form',
            width: 300,
            height: 100,
            items: [
                {xtype: 'textfield', name: 'FIELD1', fieldLabel: 'Field 1', allowBlank: false}
            ],
            renderTo: Ext.getBody()
        });
    });
    </script>
</body>
</html>

Dans l'exemple ci-dessus, si vous cliquez sur le champ puis que vous cliquez en dehors de celui-ci sans rien taper, une info-bulle indique qu'il n'est pas autorisé à être vide. L'info-bulle n'est pas assez large pour voir le message malheureusement. Quelqu'un at-il rencontré ce?

Merci!

javascriptextjs
30
user1578653

Merci pour l'aide les gars, mais j'ai trouvé une solution sur le forum Sencha qui semble fonctionner:

http://www.sencha.com/forum/showthread.php?260106-Tooltips-on-forms-and-grid-are-not-resize-to-the-size-of-the-text/page3# 24

Plus précisément, le code suivant au début de l'application:

delete Ext.tip.Tip.prototype.minWidth;
27
user1578653

c'est un bug d'extjs 4.2, ça marche sur firefox 19 mais pas en chrome 26

vous devriez outrepasser la classe css pour l'info-bulle:

.x-tip {
    width: auto !important;
}
.x-tip-body {
    width: auto !important;
}
.x-tip-body span {
    width: auto !important;
}
15
Eko Dedy

Désolé, je ne peux pas vous aider beaucoup. C’est un problème connu de 4.2.0 qui sera probablement résolu dans leur prochaine version. Voir: http://www.sencha.com/forum/showthread.php?257201

Si vous n’avez pas besoin du dimensionnement dynamique du conteneur de tip, vous pouvez simplement remplacer le CSS par une solution temporaire.

.x-tip-form-invalid, .x-tip-body-form-invalid {
    width: 150px !important;
}
4
James

Supprimer Ext.tip.Tip.prototype.minWidth ne résout pas le problème dans tous les cas (sur IE10) pour moi, et ajouter 

if(Ext.isIE10) { 
      Ext.supports.Direct2DBug = true;
}

Corrige les info-bulles mais provoque d'autres problèmes étranges (les marges des boutons de la barre d'outils sont parfois affectées!). La meilleure solution que j'ai vue est:

Ext.override(Ext.tip.QuickTip, {
        helperElId: 'ext-quicktips-tip-helper',
        initComponent: function ()
        {
            var me = this;


            me.target = me.target || Ext.getDoc();
            me.targets = me.targets || {};
            me.callParent();


            // new stuff
            me.on('move', function ()
            {
                var offset = me.hasCls('x-tip-form-invalid') ? 35 : 12,
                    helperEl = Ext.fly(me.helperElId) || Ext.fly(
                        Ext.DomHelper.createDom({
                            tag: 'div',
                            id: me.helperElId,
                            style: {
                                position: 'absolute',
                                left: '-1000px',
                                top: '-1000px',
                                'font-size': '12px',
                                'font-family': 'tahoma, arial, verdana, sans-serif'
                            }
                        }, Ext.getBody())
                    );

                if (me.html && (me.html !== helperEl.getHTML() || me.getWidth() !== (helperEl.dom.clientWidth + offset)))
                {
                    helperEl.update(me.html);
                    me.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + offset, me.minWidth, me.maxWidth));
                }
            }, this);
        }
    });

Cela semble fonctionner sur IE9 et 10, Chrome et Firefox.

3
user826840

Toujours en train de regarder cela de temps en temps par curiosité ...

J'ai essayé de comparer les sources 4.1 et 4.2. Je pense que le problème est dans la disposition de conteneur automatique quelque part. Entre 4.1 et 4.2 UNE TONNE de choses ont changé. Donc, nous pouvons regarder à travers cela.

j'espère que ça marche pour certaines personnes.

if(Ext.isIE10) { 
      Ext.supports.Direct2DBug = true;
  }

  if(Ext.isChrome) {
      Ext.define('Ext.layout.container.AutoTip', {
        alias: ['layout.autotip'],
        extend: 'Ext.layout.container.Container',

        childEls: [
            'clearEl'
        ],

        renderTpl: [
            '{%this.renderBody(out,values)%}',

            '<div id="{ownerId}-clearEl" class="', Ext.baseCSSPrefix, 'clear" role="presentation"></div>'
        ],

        calculate: function(ownerContext) {
            var me = this,
                containerSize;

            if (!ownerContext.hasDomProp('containerChildrenDone')) {
                me.done = false;
            } else {

                containerSize = me.getContainerSize(ownerContext);
                if (!containerSize.gotAll) {
                    me.done = false;
                }

                me.calculateContentSize(ownerContext);
            }
        }
    });

    Ext.override(Ext.tip.Tip, {
        layout: {
            type: 'autotip'
        }
    });
}

Ext.QuickTips.init();

Vous pouvez voir plus de détails sur ce sujet de forum .

3
Sajib Hassan

Une autre solution consiste à remplacer la largeur minimale de QuickTip car la disposition des champs crée une nouvelle QuickTip qui ne repose pas sur QuickTip singleton (contrairement à la documentation).

Ext.override(Ext.tip.QuickTip,{
    minWidth: 200
});
0
Miisha

Une autre solution pas trop mauvaise a été d’ajouter ce CSS:

.x-border-box .x-tip, .x-border-box .x-tip * {
  box-sizing: content-box;
}

Mais les info-bulles sont un peu trop grandes.

Je vais essayer la solution de user826840 avec le remplacement de Ext.tip.QuickTip.

0
ovillemain