leonardb
10 Jun 2010, 3:35 PM
Ext version tested:
Ext 3.2.1
Adapter used:
ext
css used:
only default ext-all.css
Browser versions tested against:
Chrome 5.0.375.55 linux
Operating System:
Linux
Description:
findField() method does not find checkbox or radio elements in CheckboxGroup or RadioGroup
Test Case:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- overrides to base library -->
<style type="text/css">
.x-check-group-alt {
background: #D1DDEF;
border-top:1px dotted #B5B8C8;
border-bottom:1px dotted #B5B8C8;
}
</style>
<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<!-- overrides to base library -->
<script type="text/javascript">
/* Uncomment the overrides to get positive result in testing
// add type flag to RadioGroup
Ext.override(Ext.form.RadioGroup, {
//private
isRadioGroup: true
});
// add type flag to CheckboxGroup
Ext.override(Ext.form.CheckboxGroup, {
//private
isCheckboxGroup: true
});
//Override for finding fields in checkboxgroups or radiogroups
Ext.override(Ext.BasicForm, {
findField: function(id) {
var field = this.items.get(id);
if (!Ext.isObject(field)) {
//searches for the field corresponding to the given id. Used recursively for composite fields
var findMatchingField = function(f) {
if (f.isFormField) {
if (f.dataIndex == id || f.id == id || f.getName() == id) {
field = f;
return false;
} else if (f.isComposite && f.rendered) {
return f.items.each(findMatchingField);
} else if (f.isRadioGroup && f.rendered) {
// for a radio group we assume
// only want to find the 'checked' radio
return f.items.each(function(sf){
if ((sf.dataIndex == id || sf.id == id || sf.getName() == id) && sf.getValue()) {
field = sf;
return false;
}
},this);
} else if (f.isCheckboxGroup && f.rendered) {
// for checkbox group we want 1st match
return f.items.each(findMatchingField);
}
}
};
this.items.each(findMatchingField);
}
return field || null;
}
});
//*/
</script>
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){
var fp = new Ext.Viewport({
items: [
{
xtype: 'form'
,id: 'fp_id'
,frame: true
,border: true
,autoHeight: true
,bodyStyle: 'padding:10px;'
,items: [
{
xtype: 'checkboxgroup'
,name: 'cbgrouptest'
,itemCls: 'x-check-group-alt'
,fieldLabel: 'Checkbox values'
,columns: 1
,items: [
{
name: 'cb-val-1'
,boxLabel: 'Val 1'
,checked: true
}
,{
name: 'cb-val-2'
,boxLabel: 'Val 2'
}
]
}
,{
xtype: 'radiogroup'
,name: 'rgrouptest'
,itemCls: 'x-check-group-alt'
,fieldLabel: 'Radio values'
,columns: 1
,items: [
{
name: 'r-val'
,boxLabel: 'Val 1'
,inputValue: '1st'
,checked: true
}
,{
name: 'r-val'
,boxLabel: 'Val 2'
,inputValue: '2nd'
}
,{
name: 'r-val'
,boxLabel: 'Val 3'
,inputValue: '3rd'
}
]
}
]
,buttonAlign: 'center'
,buttons: [
{
text: 'Find field cb-val-1'
,handler: function() {
console.log('Find field cb-val-1',Ext.getCmp('fp_id').getForm().findField('cb-val-1'));
}
}
,{
text: 'Find field r-val'
,handler: function() {
console.log('Find field r-val',Ext.getCmp('fp_id').getForm().findField('r-val'));
}
}
]
}
]
});
fp.show();
}); //end onReady
</script>
</head>
<body>
<div id="form-ct"></div>
</body>
</html>
See this URL : na
Steps to reproduce the problem:
comment out the overrides and try to find field using Ext.getCmp('fp_id').getForm().findField('XXX') where XXX is field name
The result that was expected:
return the field object
The result that occurs instead:
returns null
Possible fix:
in test case, just uncomment the overrides
Ext 3.2.1
Adapter used:
ext
css used:
only default ext-all.css
Browser versions tested against:
Chrome 5.0.375.55 linux
Operating System:
Linux
Description:
findField() method does not find checkbox or radio elements in CheckboxGroup or RadioGroup
Test Case:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- overrides to base library -->
<style type="text/css">
.x-check-group-alt {
background: #D1DDEF;
border-top:1px dotted #B5B8C8;
border-bottom:1px dotted #B5B8C8;
}
</style>
<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<!-- overrides to base library -->
<script type="text/javascript">
/* Uncomment the overrides to get positive result in testing
// add type flag to RadioGroup
Ext.override(Ext.form.RadioGroup, {
//private
isRadioGroup: true
});
// add type flag to CheckboxGroup
Ext.override(Ext.form.CheckboxGroup, {
//private
isCheckboxGroup: true
});
//Override for finding fields in checkboxgroups or radiogroups
Ext.override(Ext.BasicForm, {
findField: function(id) {
var field = this.items.get(id);
if (!Ext.isObject(field)) {
//searches for the field corresponding to the given id. Used recursively for composite fields
var findMatchingField = function(f) {
if (f.isFormField) {
if (f.dataIndex == id || f.id == id || f.getName() == id) {
field = f;
return false;
} else if (f.isComposite && f.rendered) {
return f.items.each(findMatchingField);
} else if (f.isRadioGroup && f.rendered) {
// for a radio group we assume
// only want to find the 'checked' radio
return f.items.each(function(sf){
if ((sf.dataIndex == id || sf.id == id || sf.getName() == id) && sf.getValue()) {
field = sf;
return false;
}
},this);
} else if (f.isCheckboxGroup && f.rendered) {
// for checkbox group we want 1st match
return f.items.each(findMatchingField);
}
}
};
this.items.each(findMatchingField);
}
return field || null;
}
});
//*/
</script>
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){
var fp = new Ext.Viewport({
items: [
{
xtype: 'form'
,id: 'fp_id'
,frame: true
,border: true
,autoHeight: true
,bodyStyle: 'padding:10px;'
,items: [
{
xtype: 'checkboxgroup'
,name: 'cbgrouptest'
,itemCls: 'x-check-group-alt'
,fieldLabel: 'Checkbox values'
,columns: 1
,items: [
{
name: 'cb-val-1'
,boxLabel: 'Val 1'
,checked: true
}
,{
name: 'cb-val-2'
,boxLabel: 'Val 2'
}
]
}
,{
xtype: 'radiogroup'
,name: 'rgrouptest'
,itemCls: 'x-check-group-alt'
,fieldLabel: 'Radio values'
,columns: 1
,items: [
{
name: 'r-val'
,boxLabel: 'Val 1'
,inputValue: '1st'
,checked: true
}
,{
name: 'r-val'
,boxLabel: 'Val 2'
,inputValue: '2nd'
}
,{
name: 'r-val'
,boxLabel: 'Val 3'
,inputValue: '3rd'
}
]
}
]
,buttonAlign: 'center'
,buttons: [
{
text: 'Find field cb-val-1'
,handler: function() {
console.log('Find field cb-val-1',Ext.getCmp('fp_id').getForm().findField('cb-val-1'));
}
}
,{
text: 'Find field r-val'
,handler: function() {
console.log('Find field r-val',Ext.getCmp('fp_id').getForm().findField('r-val'));
}
}
]
}
]
});
fp.show();
}); //end onReady
</script>
</head>
<body>
<div id="form-ct"></div>
</body>
</html>
See this URL : na
Steps to reproduce the problem:
comment out the overrides and try to find field using Ext.getCmp('fp_id').getForm().findField('XXX') where XXX is field name
The result that was expected:
return the field object
The result that occurs instead:
returns null
Possible fix:
in test case, just uncomment the overrides