PDA

View Full Version : [2.2][CLOSED] Checkbox and Radio require autoShow when using renderTo


geoffrey.mcgill
19 Aug 2008, 1:41 AM
If the Checkbox or Radio is renderTo'd a container <div>, the autoShow config must be explicitly set to 'true'. This appears to be different functionality from previous 2.x releases where the Checkbox/Radio would be automatically visible.

The autoShow config is 'false' by default, although maybe should be set internally if renderTo.

Example


<script type="text/javascript">
Ext.onReady(function() {
var radio1 = new Ext.form.Radio({
renderTo: "container1",
autoShow: true // <-- must explicitly set autoShow: true,
});

var check1 = new Ext.form.Checkbox({
renderTo: "container2",
autoShow: true // <-- must explicitly set autoShow: true,
});
});
</script>

<div id="container1"></div>
<div id="container2"></div>
Condor
19 Aug 2008, 1:47 AM
Not true. What you are doing here is showing the internal input type=checkbox (which should remain hidden!).

You need to update your stylesheets and images to 2.2 and check if you set Ext.BLANK_IMAGE_URL correctly.
geoffrey.mcgill
19 Aug 2008, 2:47 AM
We're using the public 2.2 release.
JavaScript and CSS is up to date and set properly.
The Ext.BLANK_IMAGE_URL is set properly.

So, if the Checkbox and Radio are showing their internal types/elements, then why does the technique appear work properly if you render a TextField to a <div> container?

Example


Ext.onReady(function() {
var radio1 = new Ext.form.Radio({
renderTo: "container1",
autoShow: true // <-- must explicitly set autoShow: true,
});

var check1 = new Ext.form.Checkbox({
renderTo: "container2",
autoShow: true // <-- must explicitly set autoShow: true,
});

var textfield1 = new Ext.form.TextField({
renderTo: "container2",
//autoShow: true, // <-- not required for TextField, works if 'true' or 'false'
allowBlank: false
});
});

<div id="container1"></div>
<div id="container2"></div>
<div id="contianer3"></div>

Hope this helps.
Condor
19 Aug 2008, 2:52 AM
DON'T set autoShow:true for checkboxes and radio's!

Try this example in the root of a fresh Ext 2.2 installation:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ext="http://www.extjs.com" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function() {
var radio1 = new Ext.form.Radio({
renderTo: "container1"
});

var check1 = new Ext.form.Checkbox({
renderTo: "container2"
});

var textfield1 = new Ext.form.TextField({
renderTo: "container2",
allowBlank: false
});
});
</script>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<div id="contianer3"></div>
</body>
</html>

Are you sure you updated all stylesheets and images to Ext 2.2?
This includes the entire resources tree and any custom themes you use!
geoffrey.mcgill
19 Aug 2008, 3:36 AM
Fixed. The problem was caused by an internal build error within our system. The new Checkbox and Radio images were not getting referenced properly.

All is well now.

FYI, I was only setting the autoShow property to work around what I thought was a bug. It was a bug, but my bug, not extjs.

Mark this thread as you wish. Thanks for the help.