PDA

View Full Version : ExtJS 3.1 Checkbox don't show



nicobarten
28 Dec 2009, 12:08 AM
Hi,

I have a checkbox in a form which isn't visible in ExtJS 3.1. The weird thing is, i have a listener attached to it, and when i click on the place where the checkbox is supposed to be, the listener actually responds! I've also checked with firebug, the checkbox is there, and responds to the listener, but it's just not visible!

code:


xtype: 'panel',
layout: 'column',
border: false,
bodyStyle: 'background-color:#DFE8F6;',
items: [
{
width: 20,
layout: 'form',
border: true,
bodyStyle: 'background-color:#DFE8F6;',
items: [
new Ext.form.Checkbox(
{
name: 'chkrijbewijs',
id: 'chkRijbewijs',
style: 'margin: 4px 0px 0px 0px',
listeners:
{
check: function(chkRijbewijs)
{
var txtRijbewijsnr = Ext.getCmp('txtRijbewijsnr');
var dtfRijbewijsDatum = Ext.getCmp('dtfRijbewijsDatum');

if(chkRijbewijs.checked)
{
txtRijbewijsnr.enable();
dtfRijbewijsDatum.enable();
}
else
{
Ext.getDom('txtRijbewijsnr').disabled = true; // Extjs functie doet het niet goed
dtfRijbewijsDatum.disable();
}
}
},
hideLabel: true
}),


This happens both in Firefox and IE.

jaime_
28 Dec 2009, 3:31 AM
Can you please provide the CSS definition of the missing element, including the inline styles? What's are the element's width and height properties after render? Do you have any effect/animation for that element or it's container(s)?

nicobarten
28 Dec 2009, 5:17 AM
it seems to occur to every checkbox in my application. The weird thing is, that when i use the same extjs files in a new project and try a checkbox, it works.

Here all the css stuff i got from a checkbox from firebug:



.x-form-check-wrap input {
vertical-align:bottom;


}
ext-all.css (regel 915)
.x-form-checkbox, .x-form-radio {
height:13px;
opacity:0;
width:13px;


}
overrides.css (regel 18)
.x-form-field {
-x-system-font:none;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;


}
ext-all.css (regel 5296)
.x-form-field {
margin:0;


}
ext-all.css (regel 836)
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0;


}
ext-all.css (regel 7)

Gerfd vandiv#ext-gen108.x-form-check-wrap

.x-form-check-wrap {
line-height:14px;


}
overrides.css (regel 6)
.x-form-check-wrap {
line-height:18px;


}
ext-all.css (regel 905)

Gerfd vandiv#ext-gen106.x-form-item

.x-form-item {
font-family:tahoma,arial,helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;


}
ext-all.css (regel 5373)

Gerfd vandiv#ext-gen103.x-panel-body

.x-panel-body {
border-style:none solid solid;


}
ext-all.css (regel 3646)

Gerfd vandiv#ext-comp-1254.

.x-panel {
border-style:solid;


}
ext-all.css (regel 3632)

Gerfd vandiv#ext-gen18.x-panel-body

.x-panel-body {
border-style:none solid solid;


}
ext-all.css (regel 3646)

Gerfd vandiv#ext-comp-1252.

.x-panel {
border-style:solid;


}

... and the html code it belongs to:



<div id="ext-gen106" class="x-form-item x-hide-label" tabindex="-1"><label id="ext-gen107" class="x-form-item-label" style="width: 100px;" for="bla"/>

<div id="x-form-el-bla" class="x-form-element" style="padding-left: 105px;">
<div id="ext-gen108" class="x-form-check-wrap">
<input id="bla" class=" x-form-checkbox x-form-field" type="checkbox" name="bla" autocomplete="off"/>


</div>


</div>

<div class="x-form-clear-left"/>


</div>



Edit: When i replace the checkbox for a textfield it works just fine. Very weird.

jaime_
28 Dec 2009, 5:28 AM
If it's happening on every single radio in your app it seems to be a CSS issue. I assume you are loading your custom styles apart from from Ext defaults. Try to alternatively disable your own CSS files/selectors to try to isolate the rule which is causing problems.

Note that you have the opacity set to 0 (invisible):



.x-form-checkbox, .x-form-radio {
height:13px;
opacity:0;
...
}
Change the opacity to 1 using Firebug and look if your checkboxes appear. If the browser is keeping the space for the element, but it's simply not shown, it's pretty sure it's the opacity issue.

nicobarten
28 Dec 2009, 5:30 AM
Found it, i had this css file for my login part:

overrides.css

i think that caused the opacity go to 0, thanks jaime! :D

funny though that it worked in ExtJS 3.0.x.