PDA

View Full Version : Problems displaying the button from combo-boxes



tystar
26 Apr 2011, 3:13 AM
Hi there!

I have this problem. As you can see in the link (some screenshots), the button of the combo boxes displays incorrect, and i dunno why. When i tested it on ExtDesigner, they looks perfect. Any ideas?

U can see what i mean in this link. (http://www.dropbox.com/gallery/668549/1/extjs?h=76399a#/)
The code is:



form_pisos = Ext.extend(Ext.form.FormPanel, {
title: 'Pisos',
padding: 10,
labelWidth: 80,
frame: true,
initComponent: function() {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'Nombre',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Dirección',
anchor: '100%'
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'container',
flex: 1,
layout: 'form',
items: [
{
xtype: 'numberfield',
fieldLabel: 'Precio (€)',
anchor: '100%',
name: 'precio'
}
]
},
{
xtype: 'spacer',
width: 10
},
{
xtype: 'container',
flex: 1,
layout: 'form',
labelWidth: 90,
items: [
{
xtype: 'numberfield',
fieldLabel: 'Metros (mm2)',
anchor: '100%',
name: 'mm2'
}
]
}
]
},
{
xtype: 'combo',
fieldLabel: 'Promoción',
anchor: '100%',
triggerAction: 'all',
displayField: 'texto',
store: {
xtype: 'jsonstore',
url: 'tratamiento.php',
baseParams: {
tipo: 'consulta',
accion: 'listado',
tabla: 'promociones'
},
autoLoad: true,
fields: [
{ name: 'id' },
{ name: 'texto'}
]
},
valueField: 'id',
hiddenName: 'promocion'
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'container',
layout: 'form',
flex: 1,
items: [
{
xtype: 'textarea',
anchor: '100%',
fieldLabel: 'Comentarios',
height: 100
}
]
},
{
xtype: 'spacer',
width: 10
},
{
xtype: 'container',
layout: 'form',
flex: 1,
cls: '',
style: {
padding: '10',
margin: 10
},
items: [
{
xtype: 'radiogroup',
fieldLabel: 'Estado',
width: 170,
items: [{
boxLabel: 'En venta',
inputValue: 1,
name: "estado"
}, {
boxLabel: 'Vendido',
inputValue: 0,
name: "estado"
}]
},
{
xtype: 'radiogroup',
fieldLabel: 'Novedad',
width: 170,
items: [{
boxLabel: 'Si',
inputValue: 1,
name: "novedad"
}, {
boxLabel: 'No',
inputValue: 0,
name: "novedad"
}]
},
{
xtype: 'combo',
fieldLabel: 'Tipo',
anchor: '100%',
store: ''
}
]
}
]
}
];
form_pisos.superclass.initComponent.call(this);
}
});


It's displayed into a panel like this:



var entorno = new Ext.Panel({
region: 'center',
layout: 'fit'
});



Using these commands:



handler: function(){
entorno.removeAll();
entorno.add(new form_pisos());
entorno.doLayout(); //para refrescar el panel
}


Thanks for your help and excuse my english!

friend
26 Apr 2011, 3:38 AM
Do you have this somewhere in your Ext.onReady() block?


Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

tystar
26 Apr 2011, 7:03 AM
Sure. This is part of my "index.html" file:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">

<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<!--<script type="text/javascript" src="../ext/ext-all.js"></script>-->
<script type="text/javascript" src="./funciones.js"></script>
<script type="text/javascript" src="./datos.js"></script>
<script type="text/javascript" src="./definiciones.js"></script>

<title>Inventario</title>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.Ajax.on("beforerequest",alerta.createCallback(1));
Ext.Ajax.on("requestcomplete",alerta.createCallback(0));
Ext.Ajax.on("requestexception",alerta.createCallback(0));
Ext.namespace("Aplicacion");

Aplicacion.app = function() {
return {
init: function(){
var vp = new Ext.Viewport({
layout: 'fit',
items:[grid]
});
}
};
}();
Ext.onReady(Aplicacion.app.init, Aplicacion.app);
</script>

</head>
<body></body>
</html>


Thanks for the advice. Any other ideas?

friend
26 Apr 2011, 8:42 AM
I can't see your screenshot as my workplace uses content filtering which blocks access to Dropbox.

As a blind guess, maybe you have a CSS override which is stepping on the native ComboBox styles?

tystar
27 Apr 2011, 8:13 AM
I hope u can see now the picture. See the dropdown button from the combo boxes. It looks cutted.

25814

I don't use CSS at all (only the ext css library for his own objetcs), but thanks for the point.

Any more ideas? Anyone?

Thanks!

friend
27 Apr 2011, 8:27 AM
Another user in a recent post (http://www.sencha.com/forum/showthread.php?130245-Help-with-Dynamic-ComboBoxes-Multiple-Dropdown-Arrows) had the exact same issue as you. His problem was caused by the inclusion of a 'lightbox.css' stylesheet that was causing conflicts.

If you haven't already, Firefox/Firebug the components in question and take a look at all styles applied.

tystar
27 Apr 2011, 8:40 AM
'friend', you're my hero. I just 'firebugged' the element and found the problem.

As you said there was a conflict in css with other file from another project that still was there. Just delete de .css file and works like a charm!

Thanks a lot!