I need to add a Check box, and when the user checks on it (as in changes the value check/uncheck) to print a console.log statement. So far i was able to display the check box, but unable to access its check event.
{
xtype: 'checkboxgroup',
columns: 1,
listeners: {
change: function (this, newValue, oldValue, eOpts) {
console.log('change');
console.log(newValue);
}
},
items: [{
boxLabel: 'Cars',
name: 'chk1',
inputValue: '1'
}]
}
As for any other field, the change event should work.
Example: http://jsfiddle.net/mbbjz/2/
Related
In an Ext.grid.panel I load a list of contents as rows with several columns. I would like the user to be able to select only one of these rows via a checkbox/radiogroup column, which has the ID of the respective entry as value.
I have already discovered the radiobuttons via the xtype widgtecolumn. But how can I set this column so that only one radiobutton in this column can be activated?
The current code for the radio column is the following:
{
xtype: 'widgetcolumn',
bind: {
text: 'Select topic'
},
dataIndex: 'defaultTopic',
widget: {
xtype: 'radio',
simpleValue: true
}
}
To ensure that the user can select only one radiobutton, you have to add the name property to your radio widget.
If you were using radiogroups like in this example, you'd have to add the name to each radiobutton. But for your use case, this configuration would be sufficient:
widget: {
xtype: 'radio',
simpleValue: true,
name: 'test'
}
See also this fiddle for an example.
You can use checkcolumn and change the records values that controls the check value using checkchange listener
Example:
{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'active',
listeners: {
checkchange: 'onChangeDefaultTopic'
}
}
In your view controller:
onChangeDefaultTopic: function (column, rowIndex, checked, record) {
if (checked) {
store.getRange().forEach((rec) => {
if (record.get('id') !== rec.get('id')) {
rec.set('active', false)
}
});
}
}
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'm trying to edit a combobox value. But what happens is when I click a grid cell the old value disappears I want to keep a the and also avoid the user to select the values form the combo box itself and not values other than those in the drop down
How can i achieve these two things.
{
text: 'Food Items',
xtype: 'gridcolumn',
dataIndex: 'food_lister',
flex: 1,
renderer: function (value) {
console.log()
if (Ext.isNumber(value)) {
var store = this.getEditor().getStore();
return store.findRecord('foodid', value).get('fooddescp');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "fooddescp",
valueField: "foodid",
queryMode: 'local',
mapperId: 'getfooddescrip',
lastQuery: '',
forceSelection: true,
listeners: {
expand: function () {
var call = this.up('foodgrid[itemId=fooditemgrid]').getSelectionModel().selection.record.data.foodname.trim();
this.store.clearFilter();
//this.store.filter('call',call);
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
}
}
}
Use editable : false in combo check the updated example
click here
Edit: As per your comment if you still want to use editable true and restric the value other than the store you have to handle it in cell editing event validateedit
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
validateedit: function( editor, context, eOpts ){
var store = context.column.getEditor().store,
record = context.record;
if(store.find('id',context.value) === -1){
context.cancel = true;
}
}
}
}
Above code is based on my example. Please check running example in my fiddle
I want to use checkboxes in extjs to filter a grid. This is my checkbox
xtype: 'checkboxfield',
id: 'cb1',
boxLabel: 'Online',
checked: true,
handler: function (field, value) { }
xtype: 'checkboxfield',
id: 'cb2',
boxLabel: 'offline',
checked: true,
handler: function (field, value) { }
What i want is that when i select it it will filter my store. It should tell the store to show the online records and/or the offline records.
i read something about the Boolean filters so maybe that is something to use but i can't find out how.
use your store's filter method on your handler like
handler: function (field, value) {
store.filter('online', value);
}
I'm using ExtJS 4.0.7, am new to Ext, and am using the new MVC architecture. I have a RadioGroup that, upon change, I want to use to reveal more UI elements. The problem is, that the change event fires twice for the RadioGroup. I'm assuming this is because both Radios fire an event for having their values change.
Is there a way to listen for a change to either the RadioGroup or Radios with the same name that will fire only once? In my experience with jQuery and Flex, I would expect a RadioGroup to only fire once.
Here's the RadioGroup code in my view:
items: [{
xtype: 'radiogroup',
id: 'WheatChoice',
padding: '',
layout: {
padding: '-3 0 4 0',
type: 'hbox'
},
fieldLabel: 'Choose Model',
labelPad: 5,
labelWidth: 80,
allowBlank: false,
columns: 1,
flex: 1,
anchor: '60%',
items: [
{ xtype: 'radiofield', id: 'SpringWheat', padding: '2 10 0 0', fieldLabel: '',
boxLabel: 'Spring', name: 'wheat-selection', inputValue: '0', flex: 1 },
{ xtype: 'radiofield', id: 'WinterWheat', padding: '2 0 0 0', fieldLabel: '',
boxLabel: 'Winter', name: 'wheat-selection', inputValue: '1', checked: true, flex: 1 }
]
}]
Here's the relevant code in my Controller:
init: function() {
this.control({
'#WheatChoice': {
change: this.onWheatChange
}
});
},
onWheatChange: function(field, newVal, oldVal) {
//this fires twice
console.log('wheat change');
}
http://www.sencha.com/forum/showthread.php?132176-radiogroup-change-event-fired-twice/page2
evant says this will be fixed with 4.1, so it's definitely a bug.
However, you can deal with the situation pretty easily:
//borrowing your function
onWheatChange: function(rg, sel) {
var selection = sel['wheat-selection'];
if (!(selection instanceof Object)) {
alert(selection);
}
}
var selection will be the new value. I know it doesn't solve the two event firing problem, but hopefully this helps!
The reason it fires twice is because your radio group has two changes happening.
A radio button is changing from checked=true to checked=false and then your newly clicked radio button is changing from checked=false to checked=true. This should really be an expected thing.
What if you wanted to do something when a radio button was no longer checked? You'd miss that entire event. Really you should just be doing a check on your listener function to only listen for the radio button that has checked=true.
It might be getting fired because the initial value is being set and that triggers the event. Try adding a third radio element and see if it fires three times.
Try this:
change : function(thisFormField, newValue, oldValue, eOpts) {
if (!Ext.isArray(newValue.myTransitionsRadio)) {
// Code goes here.
}
Here myTransitionsRadio in my case, is the common name given to all radio buttons.
Thanks
Nagendra