You found a bug! We've classified it as
EXTJSIII-145
.
We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
-
Sencha User
ext 3.4.1.1 problem with a checkboxgroup in column layout (all browsers)
Hi,
To support IE10 I upgrade ext js from the version 3.4.0 to 3.4.1.1.
The content of my checkboxgroup doesn't appear because it has a width of 0.
The problem comes from the changes in the columnLayout class of the version 3.4.1.1.
If I use ext js 3.4.1.1 with the version 3.4.0 of the columnLayout class I have no problem with my test case.
To test, click on the button change and you shouldn't see the checkbox in the checkboxgroup with the name 'Type'.
What is the problem that the modifications of the ColumnLayout class fixe?
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<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-debug.js"> </script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var integrationHisto = new Ext.form.Checkbox({
boxLabel : 'Integration',
name : 'integrationHisto',
checked : true
});
var reportingHisto = new Ext.form.Checkbox({
boxLabel : 'Reporting',
name : 'reportingHisto',
checked : true
});
var fp3 = new Ext.FormPanel({
region: 'north',
frame: true,
width: 500,
height: 500,
// autoHeight: true,
items: [{
border: false,
layout:'table',
defaults: {
border: false
},
layoutConfig: {
columns: 2
},
items: [{
layout: 'form',
width: 400,
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Type',
items: [
integrationHisto,
reportingHisto
]
}]
}, {
xtype: 'panel',
layout: 'form',
items: [{
xtype: 'button',
text: 'Apply'
}]
}]
}]
});
var panel = new Ext.Panel({
layout: 'border',
width: 800,
height: 800,
items: [
fp3, {
xtype: 'panel',
region: 'center',
items: [{
xtype: 'label',
text: 'hello'
}]
}]
});
var activeItem = 0;
var cardPanel = new Ext.Panel({
id: 'my-card',
height: 800,
width: 800,
renderTo: Ext.getBody(),
layout: 'card',
activeItem: activeItem,
layoutConfig: {
deferredRender: false
},
items: [{
title: 'Tab 1',
html: 'A simple tab'
}, panel],
buttons: [{
text: "Change",
handler: function() {
var cardP = Ext.getCmp('my-card');
activeItem = (activeItem + 1) % 2;
cardP.getLayout().setActiveItem(activeItem);
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
Thank you for your help.
-
Thanks for the report! I have opened a bug in our bug tracker.
Looks like it's setting the width to zero.
-
Ext JS Premium Member
I had a similar issue with the column layout used in a form component. I narrowed it down to the Ext.layout.ColumnLayout.onLayout method.
Here is the change:
Code:
var size = this.getLayoutTargetSize();
if (Ext.isIE9m && (size.width < 1 && size.height < 1)) { // display none?
return;
}
I believe this change is inappropriate because the size.width and size.height values can be zero when the component tree is rendered, and become not zero when the layout cycle completes.
Restoring the previous logic fixes the issue for me, here is my change:
Code:
var size = this.getLayoutTargetSize();
if (size.width < 1 && size.height < 1) { // display none?
return;
}
Reply With Quote
