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}"
},
}
Related
Is there a way to hide a node (a parent or a child) in a treegrid? I set the visible property to false but it does not disappear: (here is the fiddle link: https://fiddle.sencha.com/#fiddle/jl1)
var tree = Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'TreeGrid',
width: 300,
height: 250,
fields: ['name', 'description'],
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name',
width: 150,
sortable: true
}, {
text: 'Description',
dataIndex: 'description',
flex: 1,
sortable: true
}],
root: {
expanded: true,
children: [{
name: 'Group 1',
expanded: true,
children: [{
name: 'Child 1.1',
description: 'Description 1.1',
leaf: true
},{
name: 'Child 1.2',
description: 'Description 1.2',
leaf: true
}]
}, {
name: 'Group 2',
expanded: true,
children: [{
name: 'Child 2.1',
description: 'Description 2.1',
leaf: true
},{
name: 'Child 2.2',
description: 'Description 2.2',
leaf: true
}]
}]
}
});
var button = Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Remove group 1',
handler: function() {
var group1 = tree.getRootNode().childNodes[0];
group1.set('visible', false);
}
});
Note: I don't want to remove the node, I want to hide it, to show it again later (I want to do this because the remove/add behaviour on tree grid is very bugged :S) !
Thanks in advance :) !
You should work with tree store. Use filters to hide values from the tree.
I've fixed your fiddle. https://fiddle.sencha.com/#fiddle/jl8
I used filterBy method to fix it. If the function returns true the Record is included to a tree, otherwise it is filtered out.
Here is some more documentation about that topic http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.data.TreeStore
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.
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
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
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.