PDA

View Full Version : [OPEN] [CLOSED][3.??] CheckboxGroup is missing Container-methods



dj
17 Sep 2009, 2:08 AM
Ext version tested:


Ext 3 rev5368



Adapter used:


ext



css used:


only default ext-all.css



Browser versions tested against:


FF3.5 (firebug 1.4.2 installed)



Operating System:


Mac OS X 10.6



Description:

Ext.form.CheckboxGroup has a child Ext.Panel to layout the checkboxes. They are properly connected ownerCt of the panel is set to the checkbox group (see this bug).

With this connection the CheckboxGroup is the parent Ext.Container for the Panel but is missing some methods to do this job properly. Namely bubble, cascade and find* are missing.

Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Ext.form.CheckboxGroup is no real Ext.Container</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

// hot-fix
//Ext.copyTo(Ext.form.CheckboxGroup.prototype, Ext.Container.prototype, 'bubble,cascade,findById,findByType,find,findBy');

Ext.onReady(function(){

Ext.onReady(function(){
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'form',
items: {
xtype: 'checkboxgroup',
fieldLabel: 'Foo',
items: [{
boxLabel: 'Foo1',
listeners: {
check: function(c){
var print_xtype = function(c){
console.log(c.constructor.xtype);
};
console.group('c.ownerCt.bubble(print_xtype);');
c.ownerCt.bubble(print_xtype);
console.groupEnd();
console.group('c.ownerCt.ownerCt.ownerCt.bubble(print_xtype);');
try {
c.ownerCt.ownerCt.ownerCt.bubble(print_xtype);
} catch(e) {
console.error(e);
}
console.groupEnd();
}
}
},{
boxLabel: 'Foo2'
}]
}
}
});
});

});
</script>

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



Possible fix:

Just copy the functions from Ext.Container over to Ext.form.CheckboxGroup:


Ext.copyTo(Ext.form.CheckboxGroup.prototype, Ext.Container.prototype, 'bubble,cascade,findById,findByType,find,findBy');

evant
17 Sep 2009, 2:12 AM
This isn't really a bug, the check groups extend field, so then it's perfectly reasonable for them to not have those methods.

It might be a useful feature request, but not a bug. Marking as closed.

dj
17 Sep 2009, 4:26 AM
A rather complex layout of mine (A complex form with card-layout in a window) triggers an exception because the CheckboxGroup does not have the bubble-method. The Exception is thrown in Ext.Container#hasLayoutPending (line 803)

I don't call Ext.Container#hasLayoutPending or Ext.Container#shouldBufferLayout directly. They get called thru the normal render process. Therefore I consider Ext.form.CheckboxGroup not having the bubble-method a bug.


I thought adding cascade and find* to Ext.form.CheckboxGroup was a good idea but it seems that this breaks something because Ext.form.CheckboxGroup#items is semantically different from Ext.Container#items.

That's the Hotfix I have in place now:


Ext.copyTo(Ext.form.CheckboxGroup.prototype, Ext.Container.prototype, 'bubble');

I probably could extract an example from my app that demonstrates this bug (in Ext.Container#hasLayoutPending:802 this.ownerCt.bubble is undefined) if that is requested.

aconran
21 Sep 2009, 4:58 AM
dj -

Yes, could you please put together a small example extracted from your app that illustrates the problem?

Thanks,

randomY
22 Sep 2009, 6:13 AM
Having the same problem as well. I put together a little demo file. What it does for me is render the first few widgets and stop after the error. If you resize the window will render a few more widgets. After that is unresponsive (the radiogroup widgets are on tab 2).


<html>
<head>
<title>Testing...</title>
<style type="text/css">
@import "extjs/resources/css/ext-all.css";
</style>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();

var tp = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
items: [
{
xtype: 'form',
id: 'floweditform-id',
url: 'php/subsFormSubmit.php',
bodyStyle: 'padding:10px 0px 0;',
standardSubmit: false,
method: 'POST',
autoHeight: true,
autoWidth: true,
labelWidth: 200,
defaults: {
anchor: '100%',
allowBlank: false,
selectOnFocus: true,
msgTarget: 'side',
width: 'auto'
},
items: [{
xtype: 'textfield',
hideLabel: true,
hideMode: 'display',
hidden: true,
name: 'flow',
value: 'bruce01',
allowBlank: true
},{
xtype: 'textfield',
name: 'remap_headers',
id: 'remap_headers-id',
seq: '301',
subtyp: 'F',
fieldLabel: 'Remap headers',
value: 'shotpno 17 i,xline 181 i,subline 185 i',
allowBlank: true
},{
xtype: 'radiogroup',
name: 'tracemovie',
id: 'tracemovie-id',
seq: '302',
subtyp: 'F',
fieldLabel: 'Panel or Trace movie',
columns: 2,
items: [
{boxLabel: 'Panel movie',name: 'tracemovie',inputValue: '0'},
{checked: true,boxLabel: 'Trace movie',name: 'tracemovie',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'pause',
id: 'pause-id',
seq: '304',
subtyp: 'F',
fieldLabel: 'Movie or Regular mode',
columns: 2,
items: [
{checked: true,boxLabel: 'Movie',name: 'pause',inputValue: '0'},
{boxLabel: 'Regular (halt)',name: 'pause',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'dspmode',
id: 'dspmode-id',
seq: '306',
subtyp: 'F',
fieldLabel: 'Color/Gray or VAW',
columns: 2,
items: [
{boxLabel: 'Color/Gray Scale',name: 'dspmode',inputValue: '0'},
{boxLabel: 'Wiggles',name: 'dspmode',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'wt',
id: 'wt-id',
seq: '307',
subtyp: 'F',
fieldLabel: 'Type of Wiggles',
columns: 2,
items: [
{boxLabel: 'VA',name: 'wt',inputValue: '0'},
{boxLabel: 'WTVA',name: 'wt',inputValue: '1'},
{checked: true,boxLabel: 'WT',name: 'wt',inputValue: '2'}
]
},{
xtype: 'radiogroup',
name: 'cwrap',
id: 'cwrap-id',
seq: '310',
subtyp: 'F',
fieldLabel: 'Colormap wraps for amps exceeding clip',
columns: 2,
items: [
{boxLabel: 'No',name: 'cwrap',inputValue: '0'},
{checked: true,boxLabel: 'Yes',name: 'cwrap',inputValue: '1'}
]
},{
xtype: 'textfield',
name: 'windowtitle',
id: 'windowtitle-id',
seq: '312',
subtyp: 'F',
fieldLabel: 'Window Title',
value: 'Badly parsed noise data',
allowBlank: '1',
blankText: ''
},{
xtype: 'textfield',
name: 'label1',
id: 'label1-id',
seq: '313',
subtyp: 'F',
fieldLabel: 'Vertical label',
value: 'Up',
allowBlank: '1',
blankText: ''
},{
xtype: 'textfield',
name: 'label2',
id: 'label2-id',
seq: '314',
subtyp: 'F',
fieldLabel: 'Horizontal label',
value: 'Yours',
allowBlank: '1',
blankText: ''
},{
xtype: 'radiogroup',
name: 'r2l',
id: 'r2l-id',
seq: '315',
subtyp: 'F',
fieldLabel: 'Data Direction',
columns: 2,
items: [
{checked: true,boxLabel: 'Left to Right',name: 'r2l',inputValue: '0'},
{boxLabel: 'Right to Left',name: 'r2l',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'flip',
id: 'flip-id',
seq: '316',
subtyp: 'F',
fieldLabel: 'Flip time axis',
columns: 2,
items: [
{checked: true,boxLabel: 'Normal',name: 'flip',inputValue: '0'},
{boxLabel: 'Up-down',name: 'flip',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'intmode',
id: 'intmode-id',
seq: '317',
subtyp: 'F',
fieldLabel: 'Interpolation mode',
columns: 2,
items: [
{boxLabel: '2D Interpolation',name: 'intmode',inputValue: '0'},
{checked: true,boxLabel: 'Nearest sample',name: 'intmode',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'fillpanel',
id: 'fillpanel-id',
seq: '318',
subtyp: 'F',
fieldLabel: 'Pad null traces',
columns: 2,
items: [
{boxLabel: 'Do not pad',name: 'fillpanel',inputValue: '0'},
{checked: true,boxLabel: 'Pad nulls',name: 'fillpanel',inputValue: '1'}
]
},{
xtype: 'radiogroup',
name: 'makefig',
id: 'makefig-id',
seq: '320',
subtyp: 'F',
fieldLabel: 'Generate GIF screen dumps',
columns: 2,
items: [
{checked: true,boxLabel: 'No GIF files',name: 'makefig',inputValue: '0'},
{boxLabel: 'Generate GIF files',name: 'makefig',inputValue: '1'}
]
}]
}
]
}]
});
var mywin = new Ext.Window({
layout: 'fit',
width: 600,
height: 400,
closeAction: 'close',
title: 'Test TabPanel',
items: [tp]
});
mywin.show();
});
</script>
</head>
<body>
</body>
</html>