I have following code that makes two radio buttons to form. Problem is that both radio buttons can be selected same time. How to fix my code?
{
xtype: 'radio',
checked: true,
fieldLabel: '<?= $this->fail_select ?>',
boxLabel: '<?= $this->i_am_not ?>',
name: 'option1',
inputValue: 'option1',
height:20
}, {
xtype: 'radio',
fieldLabel: '',
labelSeparator: '',
boxLabel: '<?= $this->something_else ?>',
name: 'option2',
inputValue: 'option2',
height:32
}
Here is good example of radiogroup
Sencha example
Related
There are some days that I'm trying to build a code that allows binding a radiogroup.
However, despite efforts, I have not succeed.
What is missing in my code?
Can you help me, please?
Fiddle:
https://fiddle.sencha.com/#fiddle/bao
You'll need to inspect the radio group once the value has change and in a ViewModel formula you need to find the first checked value and return is boxLabel.
See your altered fiddle here
I got below less codes.
In this method, two components are connected with less codes.
{
xtype: 'radiogroup',
reference: 'startTimerEndType',
publishes: 'value',
fieldLabel: 'Test',
columns: 1,
vertical: true,
items: [
{boxLabel: 'One', name: 'box', inputValue: '1', checked: true},
{boxLabel: 'Two', name: 'box', inputValue: '2'},
{boxLabel: 'Three', name: 'box', inputValue: '3'},
]
},{
xtype: 'numberfield',
hidden: true,
bind: {
visible: "{startTimerEndType.value.box==3}"
},
}
can anybody tell How to set dynamic inputValue and boxlabel for radio button in radio group in extjs4.1
Thanks
Maybe you could use a listener like this example on sencha wiki.
Panel with radio group:
Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 300,
height: 125,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1',
listeners: {
change: function (e, t, eOpts) {
...
}
}
},
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2' checked: true},
{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
]
}]
});
Little example: on stackoverflow
I get checked data string: "box0,box15,box30,box45"
Sencha docs says, I can set the value this way (checkboxes id and name are same like above)
// use comma separated string to set items with name to true (checked)
myCheckboxGroup.setValue('cb-col-1,cb-col-3');
I want to set true my boxes this way, but can't. Have you any idea about this?
This should work :
Ext.getCmp('MyCheckboxGroup').setValue({
cbxName: true,
cbxDescription: false
//cbxDescription: (condition) //you can always specify an condition here.
});
NOTE: cbxName, cbxDescription are the id's of checkboxes under MyCheckboxGroup, eg:
{
xtype: 'checkboxgroup',
fieldLabel: 'MyCheckboxGroup',
name: 'mycbxgrp',
columns: 2,
items: [
{ id: 'cbxName', boxLabel: 'Name', name: 'mycbxgrp', inputValue: 1 },
{ id: 'cbxDescription', boxLabel: 'Description', name: 'mycbxgrp', inputValue: 2 }
]
}
I'm not at work so i can't check my sources but i recall that it should be
cb-col-1 = Ext.getCmp(cb-col-1)
cb-col-3 = Ext.getCmp(cb-col-3)
myCheckboxGroup.setValue(cb-col-1 true);
myCheckboxGroup.setValue(cb-col-3, true);
if it is a component, and
Ext.get('cb-col-1').dom.value = true;
Ext.get('cb-col-3').dom.value = true;
if it is an element
When using setValue with a checkboxgroup you need to pass the checkbox field name:
Ext.create('Ext.form.CheckboxGroup', {
id: 'MyGroup',
items: [{
xtype:'checkbox',
name: 'check1'
},{
xtype: 'checkbox',
name: 'check2'
},{
xtype: 'checkbox',
name: 'checkset',
inputValue: 'val1'
},{
xtype: 'checkbox',
name: 'checkset',
inputValue: 'val2'
}]
});
Ext.getCmp('MyGroup').setValue({
check1: true,
check2: false,
checkset: ['val1', 'val2']
});
Literally lifted from the Sencha Docs
I'm trying to reuse a radiogroup class that I've created, but I can't seem to get it working. Here's my code:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Test',
appFolder: 'app',
controllers: ['RadioController'],
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'buttons',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
//name: '1',
defaults: {
name: 'button1'
}
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
//name: '2',
defaults: {
name: 'button2'
}
}]
}]
}]
});
}
});
RadioController.js
Ext.define('Test.controller.RadioController', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
views: ['RadioButtons'],
init: function() {
}
});
RadioButtons.js
Ext.define('Test.view.RadioButtons', {
extend: 'Ext.form.RadioGroup',
alias: 'widget.radiobuttons',
items: [{
boxLabel: 'radio 1',
inputValue: 'radio 1'
}, {
boxLabel: 'radio 2',
inputValue: 'radio 2'
}]
});
What happens is, the page gets loaded, and everything looks right. However, when I click a radio button in 'group 1' and then click a radio button in 'group 2', I lose the clicked button in 'group 1'. I thought radio buttons worked off of the 'name' property, and if they had a different name property, they'd basically be in a different group... thus, I shouldn't lose group 1's clicked button. Basically, I'm trying to create this jsfiddle code by reusing a class I've made. Is this possible?
It's good to note that if I use the class's code in place of using the class, I can get my results, but this isn't good practice because that's what classes try to eliminate.
This works for me... thanks to bizcasfri on the Sencha forums.
RadioButtons.js
Ext.define('RadioButtons', {
extend : 'Ext.form.RadioGroup',
alias : 'widget.radiobuttons',
constructor: function (config) {
Ext.apply(this, {
defaults: {
xtype: 'radio',
name: config.name
},
items: [
{
boxLabel: 'Radio 1',
inputValue: '1'
},
{
boxLabel: 'Radio 2',
inputValue: '2'
}
]
});
this.callParent(arguments);
}
});
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Test',
appFolder: 'app',
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'buttons',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
name: 'radiogroup1'
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
name: 'radiogroup2'
}]
}]
}]
});
}
});
Take note of the constructor method in the RadioButtons class... that's the trick to it all!
After loading in a store of user roles [id, name] I can easily make the following form field which dynamically populates a drop down list of roles (User, Admin, ...)
{
xtype: 'combobox',
name: 'roleIds',
queryMode: 'local',
pinList: false,
fieldLabel: 'Role',
store: 'Roles',
displayField: 'name',
valueField: 'id',
allowBlank: false
}
This works fine but what are the proper steps required to turn this into a radiogroup? How do I make sure the proper radio button is selected when editing a record? How do I specify the default when the form is empty and making a new user?
Thanks
It's basically very similar thing. At the end you need to have something like this:
{
xtype: 'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
]
}
So after you receive data from the server, do a simple loop and create array of items (each items is Ext.form.field.Radio and then create a radio group and pass this array in.