http://codigo.extjs.mx/extjs4/qtips/rendertooltip/rendertooltip.rar
En el siguiente ejemplo aplicaremos un estilo a un tooltip en el cual podremos cambiar el color de fondo y texto, además de que usaremos un componente Ext.XTemplate, para personalizar el tooltip con datos como nombre, e-mail y foto de un usuario. Primero definimos la clase css que nos permite ponerle un fondo de color al tooltip.
.x-btn-green { border-color: #A7C942; background-image: none; background-color: #A7C942; }Definimos también el tooltip asignando un target que apuntara al elemento que mostrara al mismo.
Ext.create('Ext.tip.ToolTip',{ target: 'persona', title:'Datos Personales', cls:'x-btn-green', trackMouse: true, tpl: Ext.create("Ext.XTemplate", '<img alt="" src="{foto}" width="60" height="60" align="left" />', 'Nombre: {name} ', 'Edad: {edad} ', 'E-mail: {email} ' ), data:data, bodyStyle: { fontSize: '15px', fontWeight: 'bold', fontFamily: 'helvetica,arial,verdana,sans-serif', color:'white' } });
• target: apunta a persona, que es el id de un botón.
• cls: es la clase css definida anteriormente.
• trackMouse: el tooltip se mueve siguiendo al cursor.
• tpl: asignamos el elemento XTemplate.
• data: es un objeto el cual contiene los datos para el template.
• bodyStyle: también podemos asignar un estilo para el texto.
Ahora veamos el ejemplo completo:
Ext.onReady(function() { Ext.QuickTips.init(); var data = { name: 'Juan Pérez Sánchez', foto: '../shared/icons/male.png', edad: '25 años', email: '[email protected]' }; Ext.create("Ext.container.Viewport",{ renderTo: Ext.getBody(), layout:'fit', scope:this, items:[{ xtype: 'container', layout: { type: 'table', columns: 1, tdAttrs: { style: 'padding: 5px 10px;' } }, items: [{ xtype: 'button', id:'persona', text: 'Perfil Usuario', scale: 'large', cls:'x-btn-default-large x-btn-blue' }] }] }) Ext.create('Ext.tip.ToolTip',{ target: 'persona', title:'Datos Personales', cls:'x-btn-green', trackMouse: true, tpl: Ext.create("Ext.XTemplate", '<img alt="" src="{foto}" width="60" height="60" align="left" />', 'Nombre: {name} ', 'Edad: {edad} ', 'E-mail: {email} ' ), data:data, bodyStyle: { fontSize: '15px', fontWeight: 'bold', fontFamily: 'helvetica,arial,verdana,sans-serif', color:'white' } }); })
Porqué es importante aprender a programar? ...
El éxito de las estimaciones de recursos en el Software ...
La programación dirigida por eventos también es un paradigma de programación
Consideraciones a tomar para llamarlo el mejor
Danos tus comentarios