PDA

View Full Version : Common component with radio buttons in one page if renderered more than once (radio c



rupamkhaitan
14 Jun 2013, 9:23 PM
Hi

I found a weird issue with radio buttons event listener.


Step1: I have a common component class which is extending container class and it has a radiogroup with 2 radio items
Step2: My main class which is of type form calls this common component twice in same page.

Each of my common component inside main page is given unique itemId, now when i click on radio group of comp1, it goes and notify the comp2 radio group as well and unchecks it.

I attached my query selector in the controller as


'#comp1 #radioGroupId' :{
change: me.onChange1Handler
},
'#comp2 #radioGroupId' :{
change: me.onChange2Handler
},


My query selectors are unique and i debug in console and see both having their unique itemId, but the child formId points to main page form and the event is listened globally on main form so my comp2 radio button gets unchecked.


After debugging that the formId assigned to my child items is of main page, i made my common component class extend from form panel and now the same query selector works.


My solution was to make my common component extend from form panel (in future if there will be nested component and their parent is container it would fail)

So please let me know if this is the original behaviour and you guys are aware of it, and what i did is correct.


POC Code is...




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ticket </title>
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs4/ext-all-dev.js"></script>
<script type="text/javascript">


Ext.onReady(function () {
Ext.define('CommonRadioButton',{
extend: 'Ext.container.Container',
alias : 'widget.CommonRadioButton',
initComponent : function () {
var me = this;
Ext.apply(me,{
items:[
{


xtype : 'container',
border : false,
layout : 'hbox',
width : '100%',
margins : '5 0 5 10',
items : [
{
xtype : 'label',
labelAlign : 'left',
text : 'Protocol:',
padding : '0 55 0 0'
},
{
xtype: 'radiogroup',
itemId: 'radioProtocolId',
items:[
{
boxLabel : 'FTP',
width : 50,
name : 'protocol',
checked : true,
inputValue : 'ftp'

},
{
boxLabel : 'TFTP',
width : 50,
name : 'protocol',
inputValue : 'tftp'
},
{
boxLabel : 'HTTP',
width : 50,
name : 'protocol',
inputValue : 'http'
}
]
}
]
}]
});
this.callParent(arguments);
}
});

Ext.define('MainPage',{
extend: 'Ext.form.Panel',
alias : 'widget.MainPage',
initComponent : function () {
var me = this;
Ext.apply(me,{
items:[
{

xtype: 'container',
layout: 'vbox',
padding: '20 20 20 20',
items: [

]
},
{
xtype : 'CommonRadioButton',
itemId : 'comp1',
},
{
xtype : 'CommonRadioButton',
itemId : 'comp2'
}
]
});
this.callParent(arguments);
}
});

Ext.define('Controller',{
extend: 'Ext.app.Controller',
refs:[

],
init: function()
{
var me = this;
me.control({
'#comp1 #radioProtocolId' :{
change: me.onComp1ProtocolChange
},
'#comp2 #radioProtocolId' :{
change: me.onComp2ProtocolChange
}
});
},
/**
* cmp1 protocol change
*/
onComp1ProtocolChange : function(radioType, newValue, oldValue){
var me = this;
var selectedValue = newValue['protocol'];
console.log('upgrade protocol change to',selectedValue);
switch(selectedValue){
case 'ftp':

break;
case 'tftp':

break;
case 'http':

break;
}
},

/**
* cmp2 protocol change
*/
onComp2ProtocolChange : function(radioType, newValue, oldValue){
var me = this;
var selectedValue = newValue['protocol'];
console.log('upgrade protocol change to',selectedValue);
switch(selectedValue){
case 'ftp':

break;
case 'tftp':

break;
case 'http':

break;
}
}

});

var mainPage = Ext.create('MainPage',{
renderTo: Ext.getBody()
});
});
</script>
</head>


<body>
</body>
</html>




Try to run it and u will see the my CommonRadioButton class is extended from container.

Just extend it from Ext.form.Panel and the same code will work fine..

evant
14 Jun 2013, 11:50 PM
This is the "correct" behaviour. On a normal HTML page, radio buttons will globally share names. A way to separate them is to put them inside a <form> element. Ext follows the same behaviour.