I am using extjs 4 for radio buttons. Code is as follow
var mychkbxgrp = Ext.create('Ext.form.RadioGroup',{
fieldLabel: 'Layer',
columns: 1,
items:[{
boxLabel: 'District', name: 'rb', inputValue: 'district',itemId:"DIS"
},{
boxLabel: 'SubDistrict', name: 'rb', inputValue: 'Subdistrict',itemId:"sub"
},{
boxLabel: 'Village', name: 'rb', inputValue: 'Village'
},{
boxLabel: 'Road', name: 'rb', inputValue: 'Roads'
},{
boxLabel: 'Point', name: 'rb', inputValue: 'POINT'
}],
listeners: {
change : function(){
alert(this.getValue());
}
}
});
I want to get the value of checked radio button once its checked. for that i have used listeners but not working. Am i right or need to use other way. please help me for same.
You can use the function getChecked()
I've tried many solutions, and following one worked only. Hope it helps
listeners: {
change : function(obj, value){
alert(value.individual);
}
}
Your code looks good. The change event is getting fired. Only change you have to make is
listeners: {
change : function(obj, value){
alert(value.rb);
}
}
Where value.rb will give you the value of the radio button which got selected.
This could also be written generically to handle all your radio groups. Value (used radioGroup in my example) is the RadioGroup, so you can use getChecked() like so:
listeners: {
change: radioGroupHandler
}
...
function radioGroupHandler(obj, radioGroup) {
var checked = radioGroup.getChecked();
if (checked.length) {
alert(radioGroup.getChecked()[0].getValue());
} else {
alert('nothing checked');
}
}
Related
I need to create a contextmenu in ExtJS 7.4 on right click but there's only childtap which only triggers on left-click event.
Is there a way to trigger that event or another for right-click?
I added two solutions. The first is a component solution (here Grid) and the second a global one.
COMPONENT
The solution would be the childcontextmenu listener.
Have a look at the following example (Modern toolkit 6+7)
const menu = new Ext.menu.Menu({
items: [{
text: 'Menu Item 1'
}, {
text: 'Menu Item 2'
}]
});
Ext.define('MyApp.MyGrid', {
extend: 'Ext.grid.Grid',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}]
}),
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}],
listeners: {
childcontextmenu: function (grid, eObj) {
grid.deselectAll();
grid.setSelection(eObj.record);
menu.showAt(eObj.event.getX(), eObj.event.getY());
eObj.event.stopEvent()
}
}
})
GLOBAL
I can show you how to fire global events, but the problem is the target. In the following example I am using document but you can also use any view.el.on and the target will be always the view. More answers might be found here
Ext.getDoc().on(
'contextmenu',
function(e){
Ext.GlobalEvents.fireEvent('contextmenu', e);
},
Ext.GlobalEvents
);
Ext.GlobalEvents.on('contextmenu', function(eObj) {
console.log('Who dares to RightClick me?');
});
Could you please help me before change/check the event on ExtJS radiogroup. I want some event should check before changing the radio button based on the condition. I need to allow user to change the select another radio button if condition says false, then we need to select the old radio button only.
Please refer the below code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 300,
height: 125,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'radiogroup',
fieldLabel: 'Gender',
columns: 1,
items: [{
boxLabel: 'Male',
name: 'rb',
inputValue: '1'
}, {
boxLabel: 'Female',
name: 'rb',
inputValue: '2',
}],
listeners: {
change: function(field, newValue, oldValue, eOpts) {
console.log(newValue);
alert(newValue.rb);
},
}
}]
});
}
});
https://fiddle.sencha.com/#view/editor&fiddle/32fb
As mentioned in the comments, there is no beforechange event that can be used to veto a change.
Some other options are:
you can the change listener to validate the radiogroup, making it invalid if an option is selected that's not right. This way the user is passively informed that there's a problem, and they have to fix it.
you can get the behaviour you described by using the oldvalue argument, and simply setting the radio control back to the old value:
change: function(field, newValue, oldValue, eOpts) {
if (<new value isn't acceptable>) {
// Probably should let the user know why
field.setValue(oldValue);
return;
}
... any other change logic here.
}
You can also use the change listener enable and disable options pre-emptively as the form state changes, thus preventing the user from making a bad choice in the first place.
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/
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 have a form where i have a radiogroup 'yes', 'no'.
When i click on 'yes' i got a textfield added to a fieldset on the form with the config option: allowBlank: false. So there is validation on the field. When I click on 'no' all fields are removed from the fieldset that is present on the form.
The problem is when the validation is active, so when you go inside the textfield and you click away from it without entering any characters into it and i click on the radiobutton 'no' the textfield disappears and gives me the following error when i catch it:
Element.alignToXY with an element that doesn't exist
When i click afterwards on the radiobutton 'yes', the textfield is shown again BUT i get an error:
TypeError: dom is undefined
I could catch these errors and do nothing with it because in fact the form seems to be working, the textfields got added and removed like it should, there are only errors present and i don't like the concept of it. Does anyone has a clue why this error occurs and how to get rid of it so it's working 100% properly?
Here is an example of the code:
var radiogroup = new Ext.form.RadioGroup({
fieldLabel: 'Radio group test',
allowBlank: false,
anchor: '85%',
items: [{
boxLabel: 'Yes',
name: 'radio',
inputValue: 1
}, {
boxLabel: 'No',
name: 'radio',
inputValue: 2
}],
listeners: {
change: function (rg, radio) {
if (radio.inputValue == 1) {
var textfield_test = new Ext.form.TextField({
fieldLabel: 'Test',
allowBlank: false,
id: 'test',
name: 'test',
anchor: '85%',
width: 320,
helpText: 'test'
});
textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
} else {
try {
txt_test = Ext.getCmp('test');
if (txt_test) {
textfield_fieldset.remove(txt_test);
}
textfield_fieldset.doLayout();
} catch (err) {
alert(err);
}
}
}
}
});
I've done this successfully not just for one textbox, but for an entire panel, and it works pretty well. In my case, any number of panel can be added and removed dynamically and it works pretty well. The relevant code that I used were:
panel.insert(medIndex,getNewPanel());
panel.doLayout();
And for remove i used,
var cmp = Ext.getCmp('Panel-' + Id);
if (cmp) {
treatment.remove(cmp, true); // True is the autoDestroy option.
}
These two in combination works for me. Though I would suggest that if you're doing this only for one textbox, then convert it into a hidden field and disable it. When you disable a field, it does not get submitted in a post, or ajax post request.
Hope this helps.
first, why did you re-add/re-remove a component like that?,..
if i was you... i will use the hide / show method of textfield class..
after read your code, i assuming that you are make a formPanel with 2 items (radiogroup and fieldset) where in the fieldset, there is a textfield... so, guestly.. mybe like this ??
var radiogroup = new Ext.form.RadioGroup({
fieldLabel: 'Radio group test',
allowBlank: false,
anchor: '85%',
items: [
{
boxLabel: 'Yes',
name: 'radio',
inputValue: 1},
{
boxLabel: 'No',
name: 'radio',
inputValue: 2}
],
listeners: {
change : function(a,b){
if (b.inputValue==1){
Ext.getCmp("textfield").enable();
Ext.getCmp("textfield").show();
}else{
Ext.getCmp("textfield").disable(); // set disable to prevent send empty data
Ext.getCmp("textfield").hide();
}
}
}
});
var formPanel = new Ext.form.FormPanel({
url : 'www.google.com',
method : "GET",
layout:'column',
frame :true,
border : false,
items : [
radiogroup,
{
xtype:'fieldset',
id : 'test',
title: 'Fieldset',
collapsible: true,
height : 200,
width : 350,
items :[{
xtype : "textfield",
id : 'textfield',
fieldLabel : "input data",
name : "text",
hidden:true,
disabled:true
}]
}
]
});
var win = new Ext.Window({
title : "holla",
width : 400,
height: 300,
border : false,
layout:'fit',
items : [formPanel]
});
win.show();
I created a jsfiddle to answer this question. The textfield seemed to get added / removed properly there: http://jsfiddle.net/jaycode/PGSb7/4/
Cheers.
Edit: For completeness, I guess I'll just post the code here as well
HTML
<div id="radios"></div>
<div id="textfield_fieldset"></div>
JS
var textfield_fieldset = new Ext.form.FieldSet({
renderTo: 'textfield_fieldset',
});
var radiogroup = new Ext.form.RadioGroup({
renderTo: 'radios',
width: 200,
height: 60,
fieldLabel: 'Radio group test',
allowBlank: false,
layout: {
type: 'vbox'
},
items: [
{
boxLabel: 'Yes',
name: 'radio',
inputValue: 1
},
{
boxLabel: 'No',
name: 'radio',
inputValue: 2
}
],
listeners: {
change: function(rg, radio) {
if (rg.lastValue.radio == 1) {
var textfield_test = new Ext.form.TextField({
fieldLabel: 'Test',
allowBlank: false,
id: 'test',
name: 'test',
anchor: '85%',
width: 320,
helpText: 'test'
});
textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
} else {
txt_test = Ext.getCmp('test');
if (txt_test) {
textfield_fieldset.remove(txt_test);
}
textfield_fieldset.doLayout();
}
}
}
});