I have a radio group
Ext.define('MyApp.view.ColorGrp',{
extend: 'Ext.form.RadioGroup',
xtype: 'colorGrp',
id:'colorGrp',
initComponent: function(){
colorSchema='1';
Ext.applyIf(me,{
value: colorSchema
items: [
{ boxLabel: Lang.SCHEMA1, name: 'cgrp', inputValue: '0'},
{ boxLabel: Lang.SCHEMA2, name: 'cgrp', inputValue: '1'}
]
});
}
});
Why isn't any radio button checked? IMO, the second radio should be checked now!?
Try :
colorSchema = { cgrp: '1' }
Working example: http://jsfiddle.net/2dy39/
Related
I'm trying to do textfiled binding in extjs with the following conditions.
What i'm doing wrong?
Need to display three textfields where by default 2nd and 3rd textfields will be disabled.
Second textfield should enable only when first field value is entered.
third should be enabled only when first and second values are entered.
the fiddle.
You have forgotten to bind the second field value to 'field2'. This sample works:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
field1: '',
field2: '',
field3: ''
},
formulas: {
fieldTwoDisabled: function (get) {
return Ext.isEmpty(get('field1'));
},
fieldThreeDisabled: function (get) {
return !(!Ext.isEmpty(get('field1')) && !Ext.isEmpty(get('field2')));
}
}
});
Ext.create({
xtype: 'panel',
title: 'VM Demo',
fullscreen: true,
defaults: {
xtype: 'textfield'
},
viewModel: {
type: 'myvm'
},
items: [{
label: 'Field 1',
bind: '{field1}'
}, {
label: 'Field 2',
bind: {
value: '{field2}', // THIS BINDING IS FORGOTTEN
disabled: '{fieldTwoDisabled}'
}
}, {
label: 'Field 3',
bind: {
disabled: '{fieldThreeDisabled}'
}
}]
})
}
});
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'm working with extjs 3. while I open first time a wiz card then all radio group are showing properly. but when I close the wiz card and open again that then all radio group are not showing.
xtype: 'radiogroup',
id: 'industry_select_type',
fieldLabel: 'Select By',
columns: 1,
items: [{
boxLabel: 'None',
name: 'industry_select_type',
inputValue: '1', // do not set this field to 0, otherwise the radiogroup will not work properly.
checked: true,
listeners: {
check: function (cb, checked) {
toggleCheck(Ext.getCmp('indTree').root, false);
}
}
}, {
boxLabel: 'All Industries',
name: 'industry_select_type',
inputValue: '2',
listeners: {
check: function (cb, checked) {
if (checked) {
Ext.getCmp('indTree').hide();
}
}
}
}, {
boxLabel: 'Specific Industries',
name: 'industry_select_type',
inputValue: '3',
listeners: {
check: function (cb, checked) {
if (checked) {
Ext.getCmp('indTree').show();
} else {
Ext.getCmp('indTree').hide();
}
}
}
}]
Remove the ID of your Radiogroup object.
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!