javascript - kitchen - ExtJS 4.2: información sobre herramientas no lo suficientemente amplia como para ver los contenidos
sencha extjs free (8)
Eliminar Ext.tip.Tip.prototype.minWidth no soluciona el problema en todos los casos (en IE10) para mí y agregar
if(Ext.isIE10) {
Ext.supports.Direct2DBug = true;
}
Repara información sobre herramientas pero causa otros problemas extraños (¡los márgenes de los botones de la barra de herramientas a veces se ven afectados!). La mejor solución que he visto es:
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);
}
});
Esto parece funcionar en IE9 y 10, Chrome y Firefox.
Desde que actualicé a ExtJS 4.2 noté que la información sobre herramientas que se muestra cuando un campo de texto tiene un error no es lo suficientemente amplio como para ver el contenido de la información sobre herramientas: siempre parecen tener 40 píxeles de ancho.
Aquí hay un caso de prueba que muestra el problema:
<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>
En el ejemplo anterior, si hace clic en el campo y luego hace clic fuera de él sin escribir nada, muestra una información sobre herramientas que dice que no está permitido que esté en blanco. La información sobre herramientas no es lo suficientemente amplia como para ver el mensaje desafortunadamente. ¿Alguien más se ha encontrado con esto?
¡Gracias!
Gracias por la ayuda chicos, pero encontré una solución en el foro Sencha que parece funcionar:
Específicamente el siguiente código al comienzo de la aplicación:
delete Ext.tip.Tip.prototype.minWidth;
Lo siento, no puedo ser de mucha ayuda, es un problema conocido con 4.2.0 que probablemente se solucione en su próximo lanzamiento. Ver: http://www.sencha.com/forum/showthread.php?257201
Como una solución temporal, si no necesita un tamaño dinámico del contenedor de punta, puede anular el CSS
.x-tip-form-invalid, .x-tip-body-form-invalid {
width: 150px !important;
}
Otra solución es anular el ancho mínimo de QuickTip ya que el diseño de campo crea una nueva sugerencia rápida que no depende de Singleton QuickTip (al contrario de la documentación).
Ext.override(Ext.tip.QuickTip,{
minWidth: 200
});
Otra solución no tan mala fue agregar este CSS:
.x-border-box .x-tip, .x-border-box .x-tip * {
box-sizing: content-box;
}
Pero los tooltips son un poco demasiado grandes.
Voy a probar la solución de user826840 con la anulación de Ext.tip.QuickTip.
Si tiene problemas con la información sobre herramientas EXTJS 4.2.1 en el navegador IE. Debes agregar la siguiente línea a tu página ASPX:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Todavía mirando esto de vez en cuando por curiosidad ...
Traté de comparar las fuentes 4.1 y 4.2 un poco más. Creo que el problema está en el diseño del contenedor automático en alguna parte. Entre 4.1 y 4.2 A TONELADAS de cosas cambió. Para que podamos mirar a través de esto.
con suerte funciona para algunas personas.
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();
Puede ver más detalles sobre este tema del foro .
esto es o error de extjs 4.2, funciona en firefox 19 pero no en Chrome 26
debe sobreescribir la clase css para la información sobre herramientas:
.x-tip {
width: auto !important;
}
.x-tip-body {
width: auto !important;
}
.x-tip-body span {
width: auto !important;
}