PDA

View Full Version : radio button into a Panel how to get value



alberto01
7 Sep 2010, 7:48 AM
hi,
this is my code:


var privacy = new Ext.Panel({
title: 'Privacy',
autoHeight: true,
padding: 10,
margin: 20,
id: 'privacy',
renderTo: 'divPrivacy',
frame:true,
contentEl: 'privacyContent',
buttons: [{
xtype: 'radio',
boxLabel: 'Accept',
checked: false,
name: 'privacyId'
},{
xtype: 'radio',
boxLabel: 'Not',
checked: true,
name: 'privacyId'
}]
});

var continue = new Ext.Panel({
frame: true,
renderTo: 'divContinue',
buttons: [{
xtype: 'button',
text: 'Continue',
handler:function(button, event){
alert(Ext.getCmp("privacyId"));
}
}],
buttonAlign: 'right'
});


When I press the continue button it returns an undefined object...
I tryed also with a Formpanel but no way...

The questions are:
- Where I wrong, in my script?
- Is it a better practice? I mean to drow 2 different panel and render them in 2 different div?

Tnk
AL

Condor
7 Sep 2010, 8:55 AM
You have no component with id:'privacyId', only components with that name.

ps. Ids need to be unique, so you can only assign it to a single component.

alberto01
7 Sep 2010, 11:42 AM
Yes I know that I don't have components with that id...
But how can I assign an Id to that?
I should use the "id:" property but it would mean have one id per component... and I don't want this.

I want one id with different values ... Maybe I wrong type of Panel? Or what else?

aw1zard2
7 Sep 2010, 12:26 PM
You want to use inputValue for different values in a radio with the same name.

It's in the checkbox/radio example for Ext JS 3.2.

:)

Simple Example below:


function selectPKG(rpkg,checked) {
console.log('Inside selectPKG with raw value='+rpkg.getRawValue()+' check='+checked);
}
var rgrp = new Ext.form.RadioGroup({
xtype: 'radiogroup',
fieldLabel: 'Package Options',
style: 'padding-left: 2px',
items: [
{boxLabel: 'No Pkg', name: 'rb-col', inputValue: 0, checked: true, listeners: { check: selectPKG } },
{boxLabel: 'PKG 1', name: 'rb-col', inputValue: 1, listeners: { check: selectPKG }},
{boxLabel: 'PKG 2', name: 'rb-col', inputValue: 2, listeners: { check: selectPKG }},
{boxLabel: 'PKG 3', name: 'rb-col', inputValue: 3, listeners: { check: selectPKG }}
]
});
var pkgs = new Ext.Window({
closable: false,
width:355,
height:430,
title: 'Packages',
items:[{
xtype: 'form',
frame: true,
collapsible: false,
labelAlign: 'top',
width: 350,
height:400,
items: [ rgrp ]
}]
});

Ext.onReady( function() {
pkgs.show();
});

7 Sep 2010, 12:28 PM
moved to Ext JS help. Please post in the proper forums next time ;).

alberto01
7 Sep 2010, 5:11 PM
Thank you aw1zard2,
but you did't answer my question :) ...
Your solution is ok, now how can I check (for example) if 'rb-col' == 1?

I need a check handled into a button like this:

var continue = new Ext.Panel({
frame: true,
renderTo: 'divContinue',
buttons: [{
xtype: 'button',
text: 'Continue',
handler:function(button, event){
/********
GET THE CHECKED VALUE OF THE rb-col FIELD AND READ THE VALUE
*******/
}
}],
buttonAlign: 'right'
});

Thank you!


([email protected]: sorry!)

aw1zard2
7 Sep 2010, 5:50 PM
If you used my example like it was it should show this in firebug.



Inside selectPKG with raw value=1 check=true
This is what i have in my app code is below simplified.


function selectPKG(rpkg,nval) {
switch(rpkg.getRawValue()) {
case '1':
alert('rb-col='+rpkg.getRawvalue());
break;
}
}

Condor
7 Sep 2010, 10:34 PM
Using your first example:

var acceptRadio = privacy.getFooterToolbar().getComponent(0);
var checked = acceptRadio.getValue();

alberto01
8 Sep 2010, 12:37 AM
aw1zard2:
I can't use the handler "rpkg" 'cause the event (im my script) is handled on the button, not on the checkbox directly like your example.

Condor:
Tnx, but now I changed the type of the panel, I'm useing the FormPanel and your solution does not work...

Thank you

AL

Condor
8 Sep 2010, 12:41 AM
OK, but the solution is the same: You need to locate the radio button.

There are several solutions to this. Post your current code and I'll post some of them.

alberto01
8 Sep 2010, 12:47 AM
OK, but the solution is the same: You need to locate the radio button. Yes!
Ok actually my code is:

var choices = [{
xtype: 'checkboxgroup',
items: [{
xtype: 'radio',
boxLabel: 'Accept',
name: 'accept',
inputValue: true
}, {
xtype: 'radio',
boxLabel: 'Dont accept',
name: 'accept',
inputValue: false,
checked: true
}]
}];

var privacy = new Ext.FormPanel({
title: 'Privacy',
autoHeight: true,
padding: 10,
margin: 20,
id: 'privacy',
renderTo: 'divPrivacy',
frame:true,
items: [
new Ext.Panel({
frame:false,
contentEl: 'privacyContent'
}),
choices
]
});


tnx

Condor
8 Sep 2010, 12:51 AM
Why are you using a CheckboxGroup with radios? Why not a RadioGroup?

The simplest solution is probably to use:

var value = privacy.getForm().getValues()['accept'];

alberto01
8 Sep 2010, 1:01 AM
M! I wrong the type sorry.
For the solution: AHHHHH!!! It was just too simple!!
I read the documentation better and in fact says:

Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit. If multiple fields exist with the same name they are returned as an array.

Thanks