Comment ajouter css personnalisé info-bulle pour extjs en-tête de colonne?
Je suis nouveau sur extjs . Je suis en train d'ajouter de l'info-bulle de préférence du css pour les en-têtes de colonne .
Comment puis-je aller sur l'ajout d'une info-bulle personnalisée à l'extjs en-tête de colonne à l'aide de css? le extjs défaut n'a pas l'air de travailler.
J'ai essayé d'utiliser le css personnalisé info-bulle pour la tête et ça n'a pas fonctionné .. Est-il possible dans extjs pour info-bulle personnalisée sur l'en-tête?
Grâce
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
splitHandleWidth: 10,
columnLines: true,
viewConfig: {
emptyText: 'No images to display'
},
renderTo: containerEl,
columns: [{
text: '<a href="#" class="ttip" title="'+m.i18n.getString('notif.class')+'">'+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span></a>',
flex: 10,
dataIndex: 'CName',
tooltip: 'C Name Some name test',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}, {
text: getString('notif.instance'),
flex: 30,
dataIndex: 'IDisplayName',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}]
});
CSS
.ttip {
border-bottom: 0px dotted #000000; color: #000000; outline: none;
/* cursor: help; */
text-decoration: none;
position: relative;
}
.ttip span {
margin-left: -999em;
position: absolute;text-decoration: none;
}
.ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
.ttip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 9999999;
margin-left: 0; width: 250px;
}
.ttip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.ttip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
a la réponse ci-dessous est utile?
OriginalL'auteur user244394 | 2012-02-23
Vous devez vous connecter pour publier un commentaire.
Donc, j'ai remarqué que vous le code fourni par votre banque, mais vous vous posez une question à propos de la grille, qui est un composant différent. Assurez-vous de comprendre la relation entre la grille et le magasin. Vous devez également utiliser un Modèle de définition de la place de la configuration des champs sur le magasin qui est l'ancienne façon de faire les choses.
Cela dit, je suis venu avec une solution intéressante à votre question: comment faire pour ajouter une info-bulle à l'en-tête de colonne.
La définition de la colonne prend la forme d'un "texte" de la propriété qui est converti à l'en-tête de colonne. Les docs de l'état que des balises HTML sont autorisés, ce qui signifie que vous pouvez définir une info-bulle de cette façon:
où les données-qtip fournit le texte de l'info-bulle.
Notez que les info-bulles doivent être activés par le biais de:
Ext.QuickTips.init();
dans votre application.À essayer d'autres choses à utiliser les docs Vivre une fonctionnalité de Prévisualisation pour tester rapidement différentes configs et les voir en action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.de la grille.la colonne.Colonne
Mise à JOUR: une info-bulle de la propriété est maintenant(depuis la version 4.1 x) disponible sur la colonne de config. L'utiliser.
Oh, je vois ce que vous dites. Vous ne voulez pas utiliser le ExtJS info-bulle pour les pop - up vous souhaitez utiliser votre propre. Ce que vous avez devrait fonctionner, il faut juste assurez-vous que votre sélecteurs CSS sont corrects, je suppose.
le css semblent remorquage ork fien, à l'extérieur, extjs .. mais n'a pas l'air de remorquage okr quand à l'intérieur de extjs pour exemple vous essayez ce code css à l'extérieur de extjs il il travail .. mais pas à l'intérieur extjs <a href="#" class="ptci" title="'+m.i18n.getString('notif.class')+'">'+e.i18n.getString('notif.class')+'<span class="classique">'+e.i18n.getString('notif.class')+'</span></a>.. Aucune idée pourquoi custom css ne twokr dans extjs ou est possible de faire de la fantaisie d'un outil de pointe en extjs?
Thx! C'est certainement utile, mais notez que l'utilisateur doit passez directement sur le texte avec cette solution (c'est à dire, à côté du texte, mais encore dans l'en-tête de colonne de la cellule n'est pas assez bon). À l'aide d'une DIV au lieu de la DURÉE de l'résout ce pour moi.
grand, oui vous pouvez indiquer n'importe quel code HTML que vous voulez, il suffit de faire attention artefacts de tri, en faisant glisser etc qui permettra d'ajouter des classes css dans l'en-tête.
OriginalL'auteur dbrin
Dans la définition de vos colonnes vous avez seulement besoin de définir l'info-bulle de paramètre, comme ceci:
J'espère que cela vous aider à
il n'y a aucune info-bulle config sur colonne de ExtJS4
vous devez toujours spécifier quelle version de ExtJS vous parlez
Oui, il y a: lien. Si cela ne fonctionne pas, assurez-vous d'initialiser le QuickTips manager.
Il n'était pas disponible à l'époque: Voir la source pour Ext 4.07 docs.sencha.com/extjs/4.0.7/source/...
OriginalL'auteur Hector