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

Question

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

Demandé el 5 de Avril, 2013: Quand la question a-t-elle été
13026 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai remarqué que depuis la mise à jour ExtJS 4.2 que les info-bulles affichées lorsqu'un champ de texte a une erreur dans le il ne sont pas assez large pour afficher le contenu de l'info - bulle, ils semblent toujours être 40px de large.

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 cliquez sur sortir sans avoir à taper quoi que ce soit, il affiche une info-bulle en disant qu'il n'est pas permis d'être vide. L'info-bulle n'est pas assez large pour afficher le message, malheureusement. Quelqu'un d'autre a rencontré ce?

Merci!

Demandé el 5 de Avril, 2013 par user1578653

Answer 1

5 Réponses

Answer 2

28voto

user1578653 Points 1409

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-resizing-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;

Répondu el 8 de Avril, 2013 par user1578653 (1409 Points )

Answer 3

17voto

Eko Dedy Points 150

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

vous devez remplacer 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;
}

Répondu el 8 de Avril, 2013 par Eko Dedy (150 Points )

Answer 4

4voto

James Points 1619

Désolé, je ne peux pas être d'une grande aide, il s'agit d'un problème connu avec 4.2.0 qui sera probablement résolu dans leur prochaine version. Voir: http://www.sencha.com/forum/showthread.php?257201

Comme solution de contournement temporaire, si vous n'avez pas besoin d'un dimensionnement dynamique du conteneur de conseils, vous pouvez simplement remplacer le CSS

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

Répondu el 6 de Avril, 2013 par James (1619 Points )

Answer 5

3voto

Sajib Hassan Points 339

Toujours à la recherche à ce moment et puis par curiosité...

J'ai essayé de comparer la 4.1 et 4.2 sources un peu plus. Je pense que le problème est dans l'auto conteneur mise en page quelque part. Entre 4.1 et 4.2 UNE TONNE de choses a changé. Nous pouvons regarder à travers cela.

espérons que cela fonctionne 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 du forum.

Répondu el 10 de Avril, 2013 par Sajib Hassan (339 Points )

Answer 6

3voto

user826840 Points 273

La suppression de Ext.tip.Tip.prototype.minWidth ne résout pas le problème dans tous les cas (sur IE10) pour moi, et l'ajout

 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.

Répondu el 25 de Avril, 2013 par user826840 (273 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: