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);
}
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 new to ExtJS. So finding little difficult in understanding many things.
I've a sample combo box where I'm retrieving datas from the table
This is the combo box:
xtype: 'fieldset',
title: 'Dress Type',
items: [{
xtype: 'combobox',
name: 'dresses',
forceNewStore: true,
queryMode: 'local',
displayField: "description",
valueField: "description",
mapperId: 'getavailabletype',
emptyText: 'Select Type
forceSelection: true,
maskRe: /[A-Za-z0-9]/,
margin: '15px',
allowBlank: false,
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function() {
this.reset();
}
}
},
}]
Here is the way I'm trying to retain the first value of the table:
me.down("combobox[name=dresses]").setValue(me.down("combobox[name=dresses]").store.getAt('0').get('description'));
I'm getting:
Uncaught TypeError: Cannot read property 'get' of null #getAt('0')
Please help
I don't know from what listener and component you are trying to achieve this, but from my perspective, the best place to achieve this is in the "render" event listener of the combobox.
Like so:
listeners: {
'render': function(combo) {
combo.setValue(combo.getStore().first());
}
}
Here you have a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1qqk
OR
If you have a reference to the combo store, let's say it's in the comboStore variable, you can set the first value like this:
{
xtype: 'combobox',
value: comboStore.first()
}
Another fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1qql
Now, if you are not sure that the store will be loaded by the time you initialize your combo, you can set the following listener for the combobox:
listeners: {
render: function(combo) {
var store = combo.getStore(),
setFirstStoreValFn = function() {
combo.setValue(store.first());
};
if (store.getCount()) {
setFirstStoreValFn();
}
else {
store.on('load', setFirstStoreValFn, null, {single: true})
}
}
}
So basically, it creates a reusable function that sets the combo value to the first record in the store, and then it checks if the store has records (which means that is has been loaded) it will call the function, if not - it will set a single load listener on the store which will then call the set value function.
Again, the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1qqm
you need to navigate to cmp --> store --> first record ---> data
for that me.down("combobox[name=dresses]").store.getAt(0).get('description'))
PROBLEM: We toggle fields on form. When secondField is shown instead of firstField, then form is changed. But secondField is still marked as not dirty, because both fields remain unchanged. Showing secondField should always make it and the form (model) dirty.
RESEARCH: setDirty() method is done on whole record, setValue() acts as expected, but smells like a hack and can't be used for various field types (textfield, combobox).
QUESTION: How to manually set a single form field state changed to invoke saving its data?
You are mixing up data state with form visualisation. By default, "field is shown" has no relation to data, so you need to explicitly create one. This can be done by changing some data on toggling, or other way round — toggling on changing data.
For example, toggling can occur on checking/unchecking a checkbox field which will represent a piece of form data (also see fiddle):
Ext.create('Ext.form.Panel', {
viewModel: {
type: 'default'
},
items: [
{
xtype: 'checkbox',
reference: 'toggle',
itemId: 'toggle',
boxLabel: 'Toggle',
hidden: true
},
{
xtype: 'button',
text: 'Toggle',
enableToggle: true,
toggleHandler: function() {
var form = this.up('form'),
checkbox = form.child('#toggle');
checkbox.setValue(!checkbox.getValue());
console.log(form.isDirty() ? 'Dirty!' : 'Not dirty');
}
},
{
xtype: 'textfield',
name: 'firstField',
fieldLabel: 'First Field',
bind: {
hidden: '{toggle.checked}'
}
},
{
xtype: 'textfield',
name: 'secondField',
fieldLabel: 'Second Field',
bind: {
hidden: '{!toggle.checked}'
}
}
],
renderTo: Ext.getBody()
});
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/