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.
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}"
},
}
I'm trying to make a simple toolbar in ExtJS containing a checkbox group and a button and it works just fine but when I try to give an id to my check box group the whole toolbar doesn't display anymore.
Here is my code:
Ext.define
(
'CMS.view.TreeGrid.Filters',
{
extend: 'Ext.form.Panel',
title: 'Filters',
layout: 'fit',
alias: 'widget.filters',
bodyPadding: 10,
renderTo: Ext.getBody(),
vtype: 'hbox',
items :
[
{
xtype: 'toolbar',
vtype: 'vbox',
items:
[
{
xtype: 'checkboxgroup',
//id: 'propertiesCBG',
fieldLabel: 'Properties',
vertical: true,
layout: 'fit',
items:
[
{ boxLabel: 'id', name: 'rb', inputValue: '1' },
{ boxLabel: 'State', name: 'rb', inputValue: '2', checked: true },
{ boxLabel: 'headline', name: 'rb', inputValue: '3' },
{ boxLabel: 'severity', name: 'rb', inputValue: '4' },
{ boxLabel: 'country', name: 'rb', inputValue: '5' },
{ boxLabel: 'hasRelated', name: 'rb', inputValue: '6' }
]
},
{
xtype: 'button',
text: 'Request',
id: 'requestButton',
},
]
}
]
}
);
When the line "id: propertiesCGB" is commented i don't have any problem and the toolbar displays like I want it to display but I need an id for my checkbox group to get its values on my controller.
Please help me, I just can't understand what the problem is.
In general it is a bad practice to use the id property. If you must have some sort of id, use itemId, which will not have any type of global uniqueness constraint and also allow you to use # in your selector.
People generally use ids to make it easy to get a reference to a component, something like:
Ext.ComponentQuery.query('#myid');
What you should really be doing is:
Ext.ComponentQuery.query('filters checkboxgroup')
in order to get a reference to your checkboxgroup.
In your case, change the selector in your controller to be 'filters checkboxgroup' and you should be just fine. Note, if you have more than one of these in your application, add more specificity to your selector, for instance, if your filters component is a child of a particular panel:
Ext.ComponentQuery.query('panel1 filters checkboxgroup')
have you tried changing the id to something else temporarily to confirm you don't have a duplicate elsewhere in your project?
xtype: 'checkboxgroup',
id: 'propertiesCBG_temp',
fieldLabel: 'Properties',
I've seen similar behavior when having two components with the same id.
Finally, it appeared that I called my toolbar in two different views so I guess this created the conflict with the ID. I'll find another way to reuse my toolbar.
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 have a panel with 2 radiogroups. I am trying to bind change event to these items from a controller file. Don't want to use listeners config in view file.
In View file
items : [{
xtype:'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
id:'new_0',
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb1', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb1', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb1', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb1', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb1', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb1', inputValue: '6' }
]
},
{
xtype:'radiogroup',
fieldLabel: 'Two Columns',
id:'new_1',
// 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' }
]
}],
And in the controller I am trying to bind the change event as follows:
refs : [
{
ref :'myradio',
selector:'radiogroup'
}],
Here its pointing to the 1st item and not binding the event for 2nd radiogroup. If am binding with ids its working fine. So the question is how I can bind change events to all radiogroup without passing ids in selector. Lets say inside a panle I have 2 radiogroup items and want to bind the change event to each radiogroup.
Thanks a ton in advance for your answers!!!!
What you could do is give each radiogroup an itemId instead of an id. Then in your controller you should be able to reference each radiogroup and bind all the events you want to each. So your controller should look something like this:
...
refs: [
{
autoCreate: true,
ref: 'firstbtngroup',
selector: '#firstbtngroup', // itemId for first radio group
xtype: 'Ext.form.RadioGroup'
},
{
autoCreate: true,
ref: 'secondbtngroup',
selector: '#secondbtngroup', // itemId for second radio group
xtype: 'Ext.form.RadioGroup'
}
],
onFirstbtngroupChange: function(field, newValue, oldValue, eOpts) {
console.log('Hey you...');
},
onSecondbtngroupEnable: function(component, eOpts) {
console.log('Hey there again...');
},
onFirstbtngroupAfterRender: function(component, eOpts) {
console.log('Dude I just renedered.');
},
onSecondbtngroupDestroy: function(component, eOpts) {
console.log('Why would you destroy me!!!');
},
init: function(application) {
this.control({
"#firstbtngroup": {
change: this.onFirstbtngroupChange,
afterrender: this.onFirstbtngroupAfterRender
},
"#secondbtngroup": {
enable: this.onSecondbtngroupEnable,
destroy: this.onSecondbtngroupDestroy
}
});
}
...
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