I have a grid with an editable text column and an editable boolean column.
columns: [
{
dataIndex: '1',
header: 'String',
editor: {
allowBlank: false
}
},
{
xtype: 'checkcolumn',
header: 'Boolean',
dataIndex: '2'
}
],
I would like to do some checking before I allow someone to edit a cell, so I implement the beforeedit function like so :
listeners: {
beforeedit: function (e) {
alert('hi')
}
}
The beforeedit fires when I try and edit a text column, but for a checkbox it does not.
Why?
Fiddle demonstrating my problem :
http://jsfiddle.net/S8Tgm/16/
Just figured it out :
{
xtype: 'checkcolumn',
header: 'Boolean',
dataIndex: '2',
listeners: {
beforecheckchange: function() {
if (condition)
return false;
}
}
}
the checkcolumn needs a beforecheckchange listener.
Related
My checkbox column:
{
xtype: 'widgetcolumn',
text: 'Selection',
tdCls: 'actions',
header: 'Selection',
width: '5%',
dataIndex: 'selection',
widget: {
xtype: 'checkbox',
defaultBindProperty: 'disabled',
listeners: {
afterrender: function (chb) {
var rec = chb.getWidgetRecord();
chb.setValue(rec.get('selection'));
chb.on('change', this.checkHandler);
chb.setDisabled(rec.get('selection_disabled'));
},
scope: this
}
}
}
How get checkbox in cellclick grid event for set value proggramatically? In cellclick me need change value of checkbox(cbox.setValue(!cbox.getValue()); or the same).
Not sure if it is best solution, but you can do something like this:
{
xtype: 'widgetcolumn',
dataIndex: 'checked',
flex: 1,
text: 'Checked',
widget: {
xtype: 'checkbox'
},
onWidgetAttach: function(column, widget, record) {
// Make sure your property / id pair is unique
// You can use Ext.id() to generate id for your record and widget
widget.widgetId = record.get('id');
}
}
and
grid.on('cellclick', function(view, td, cellIndex, record) {
var rowWidget = Ext.ComponentQuery.query('checkbox[widgetId=' + record.get('id') + ']')[0];
if(rowWidget) {
rowWidget.setValue(!rowWidget.getValue());
}
});
Working fiddle
I have a gridpanel with rowediting plugin enabled. I was wondering if it is possible to display in the same cell either checkbox control or numberfield based on data that's being returned from server. I have not seen anything like that before and googling has not yield any results so it may be impossible at all. It looks like I have to specify different editor types not per each column but per each cell.
How can I achieve that?
P.S. I must have a chance to edit that cell, i.e. change number value or check/uncheck checkbox.
That is very easy to achieve, you will need to use the getEditor method of your grid column and get it to return the form field you want:
Example:
{
xtype: 'gridcolumn',
getEditor: function(record) {
var grid = this.up('grid'),
cellediting = grid.findPlugin('cellediting'),
editors = cellediting.editors,
editor = editors.getByKey(this.id),
fieldType;
if (editor) {
// Do this to avoid memory leaks
editors.remove(editor);
}
fieldType = isNaN(parseFloat(record.get('salary'))) ? 'textfield' : 'numberfield';
return {
xtype: fieldType,
allowBlank: false
};
},
dataIndex: 'salary',
text: 'Salary',
flex: 1
}
I have created a fiddle demonstrating the use of this method, if the column Salary holds a string it will edit with a textfield, if it holds a number, it will edit with a Numberfield.
Hope it helps
Fiddle: https://fiddle.sencha.com/#fiddle/c2m
My fiddle is working with the CellEditor plugin, you will have to make the adjustments to make it work with your RowEditor plugin, for further reference, check the documentation for Grid Column and the getEditor method.
Many thanks to Guilherme Lopes for the nice code to begin with. Here is the sample of what I finally got:
var data = [{
name: 'Richard Wallace',
age: 24,
hired: '9/21/2013',
active: true,
salary: 1,
checkbox: true
}, {
name: 'Phyllis Diaz',
age: 29,
hired: '1/27/2009',
active: false,
salary: 41244,
checkbox: false
}, {
name: 'Kathryn Kelley',
age: 23,
hired: '9/14/2011',
active: false,
salary: 98599.9,
checkbox: false
}, {
name: 'Annie Willis',
age: 36,
hired: '4/11/2011',
active: true,
salary: 0,
checkbox: true
}];
var store = Ext.create('Ext.data.Store', {
data: data,
fields: [{
name: 'name'
}, {
type: 'float',
name: 'age'
}, {
type: 'date',
name: 'hired'
}, {
type: 'boolean',
name: 'active'
}, {
name: 'salary'
}]
});
Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel',
height: 315,
width: 784,
title: 'Employees',
store: store,
viewConfig: {
listeners: {
beforecellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
if (cellIndex == 4 && record.get('checkbox')) {
if (record.get('salary')) {
record.set('salary', 0);
} else {
record.set('salary', 1);
}
return false;
}
return true;
}
}
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
flex: 1,
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
}, {
xtype: 'datecolumn',
dataIndex: 'hired',
text: 'Hired',
flex: 1
}, {
xtype: 'checkcolumn',
dataIndex: 'active',
text: 'Active'
}, {
xtype: 'gridcolumn',
getEditor: function (record) {
var fieldType = record.get('checkbox') ? 'checkboxfield' : 'textfield';
return Ext.create('Ext.grid.CellEditor', {
field: {
xtype: fieldType,
allowBlank: false
}
});
},
renderer: function (value, metaData) {
if (metaData.record.get('checkbox')) {
if (metaData.record.get('salary')) {
return '<div style="text-align: center"><img class="x-grid-checkcolumn x-grid-checkcolumn-checked" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
} else {
return '<div style="text-align: center"><img class="x-grid-checkcolumn" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
}
}
return value;
},
dataIndex: 'salary',
text: 'Salary',
flex: 1
}],
plugins: [{
ptype: 'cellediting',
autoCancel: false,
clicksToEdit: 1
}]
});
Ext.create('MyApp.view.MyGridPanel', {
renderTo: Ext.getBody()
});
Working example on Sencha's fiddle https://fiddle.sencha.com/#fiddle/c3p
Editor contains one field, and this editor is used for the whole column. You can't specify two xtypes or multiple editors for one column.
That said, it is not completely impossible, but it will require some work.
You will have to define a new custom field with custom xtype.
Tell this field to either render a checkboxfield or a numberfield, depending on the value.
This will require you to override/implement most if not all functions that a Ext.form.field.Base has...
I am new to EXTJS. I have a grid , where I have checkbox column . What I wanted is , how to capture the check or uncheck events happening in the checkbox .
Here is my code for checkbox in my grid
columns : [
{
xtype: 'checkcolumn',
header: 'Enabled',
dataIndex: 'isEnabled',
width: 55
},
....
]
Please help
Just what Evan Trimboli said, with the checkchange event on the grid you can capture when a checkbox changes value.
Ext.create('Ext.grid.Panel', {
//...
columns : [{
xtype: 'checkcolumn',
header: 'Enabled',
dataIndex: 'isEnabled',
width: 55,
listeners: {
checkchange: function(column, rowIdx, checked, eOpts){
//Logic here
}
}
}],
});
There is a little change in the give answer, the checkchange event is for Ext.grid.column.check not for Ext.grid.Panel
Ext.create('Ext.grid.Panel', {
//...
columns : [{
xtype: 'checkcolumn',
header: 'Enabled',
dataIndex: 'isEnabled',
width: 55,
listeners: {
checkchange: function(column, rowIdx, checked, eOpts){
//Logic here
}
}
}]
});
I am using extjs 4 and I have a grid which shows a field name Approval. Here I have showed checkbox that will be checked when the grid is loaded if the value is true. But if the dataIndex value is fault only the checkbox will appear. Now I want that if I click on unchecked checkbox it will do a action using listeners. But I am not being able to do it. Can anyone please help me on this ? My codes are given below :
{
text: 'Approval',
dataIndex: 'approve',
flex: 1,
align: 'left',
renderer: function(value, metaData, record, row, col, store, gridView){
if(value == true)
{
return '<input type="checkbox" checked="true" />';
}else{
return '<input type = "checkbox" />';
listeners: {
this.approve();
}
}
}
}
approve: function(){
alert('hi');
}
Old answer
The checkbox has a change listener which will get fired after the value has changed.
{
xtype : 'checkbox'
boxLabel : 'This is my checkbox',
name : 'mycheckbox',
inputValue: true,
listeners : {
change: function(cbx, newValue, oldValue){
me.approve();
}
}
}
Note that you can't use this inside the listener because the function gets called inside another scope.
Edit:
Start using a Ext.ux.CheckColumn on your grid.
Now you can use:
{
xtype: 'checkcolumn',
text: 'Approval',
dataIndex: 'approve',
flex: 1,
align: 'left',
sortable: false,
listeners:{
checkchange:function(cc,ix,isChecked){
alert(isChecked);
}
}
}
What you are trying to archive is not possible out of the box.
I guess you want to display the checkbox all the time? Otherwise the CellEditor Plugin is already what you are looking for.
But it should anyway the point to start (I guess). Here is a example code the uses ExtJS classes & images to display a sort of fake combo in a cell along with a celleditior. There is one think you still have to fix; you need to override the cellcontent before the edits starts cause the celleditor seems to remove only default types.
Way going this way? Of course you could modify the checkbox with a unique id and fetch the Ext.Element for it which would now enable you to register events. But that approach has one downside, you need to care about render time otherwise your combos does not exist when you are trying to fetch it. Therefore I recommend you this approach. It you be quite easy to wipe the image before the rendering starts.
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":true},
{"name":"Bart", "email":"bart#simpsons.com", "phone":false},
{"name":"Homer", "email":"home#simpsons.com", "phone":true},
{"name":"Marge", "email":"marge#simpsons.com", "phone":true}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone',
editor: { xtype: 'checkbox', inputValue: 'true', uncheckedValue: 'false' }, renderer: function(value){
return value ? '<span class="x-form-cb-checked"><div class="x-form-checkbox"></div></span>' : '<div class="x-form-checkbox"></div>';
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Here's the JSFiddle
I see the example in ExtJS, but it seems the checkColumn doesn't update the XML. The API is also not so helpful. What I wanted to do is something like this. When the user clicks the checkbox in the grid it will send an AJAX request.
columns: [{
xtype: 'checkcolumn',
width: 30,
sortable: false,
id: 'check1',
dataIndex: 'check11',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, recordIndex, checked) {
alert(checked);
alert("hi");
}
}
}
]
worked for me :)
in extjs4 you can do this. there is the 'checkchange' event, so you can have something like this :
{
header: 'State',
dataIndex: 'STATE',
xtype: 'checkcolumn',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function(column, recordIndex, checked) {
console.log(checked);
//or send a request
}
}
}
You are going to want to fire the ajax request on the check change event. Or if you are trying to use the CheckboxSelectionModel in a grid put a listener on rowselect to fire off the ajax request.
if You are going to or want to fire the ajax request on the check change event. I think this will help for you.
columns: [{
xtype: 'checkcolumn',
width: 30,
sortable: false,
id: 'check1',
dataIndex: 'check11',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, recordIndex, checked) {
Ext.Ajax.request({
url: 'abc.com/index.php',
scope: this,
params: { postData: postdata },
method: 'POST',
success: function (a) {
}
});
}
}
]