Extjs: enable / disable checkbox with renderer on grid load
I need to load a grid based on the query results I am getting. I have no problem loading text boxes in the grid, but there is one specific column that is the checkbox type. I am using xtype: 'checkcolumn' for this purpose. An object that returns the results of a query returns "Y" or "N" for this column. If it is "Y" I need to enable this checkbox, and if it is "N" the checkbox should be disabled. I am using the following code to define my field field.
{
xtype: 'checkcolumn',
header: "Old User",
disabled: true,
disabledCls:'x-item-enabled',
width: 170,
dataIndex: 'oldUser',
itemId: 'oldUser',
renderer: this.checkOldUser
}
checkOldUser: function (oldUser) {
if(oldUser== 'Y'){
this.oldUser.setDisabled(false);
}
}
This render feature doesn't work for me. What does the renderer look like? Can you tell me how to fix this problem ?. Thank....
source to share
Wow, I thought it would be easier, but as it turns out .... not much.
You will need to do two things:
1 - Change the checkcolumn renderer
2 - add a beforecheckchange listener to return false in case the user clicks on an entry that has "N" as its value;
Your final mesh should look something like this:
Ext.create('Ext.grid.Panel', {
height: 250,
width: 579,
title: 'My Grid Panel',
defaultListenerScope: true,
store: myStore,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'checkcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var cssPrefix = Ext.baseCSSPrefix,
cls = cssPrefix + 'grid-checkcolumn';
if (this.disabled || value == 'N') {
metaData.tdCls += ' ' + this.disabledCls;
}
if (value) {
cls += ' ' + cssPrefix + 'grid-checkcolumn-checked';
}
return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
},
dataIndex: 'oldUser',
text: 'OldUser',
listeners: {
beforecheckchange: 'onCheckcolumnBeforeCheckChange'
}
}
],
onCheckcolumnBeforeCheckChange: function(checkcolumn, rowIndex, checked, eOpts) {
var row = this.getView().getRow(rowIndex),
record = this.getView().getRecord(row);
return (record.get('oldUser') != 'N');
}
});
I created a script: https://fiddle.sencha.com/#fiddle/bqd
source to share
Slightly simpler way helped me
renderer: function(val, metaData, rec) {
if (rec.get('usersSetId') == -1) {
metaData.tdCls += ' ' + this.disabledCls;
}
return (new Ext.ux.CheckColumn()).renderer(val, metaData);
},
listeners: {
beforecheckchange: function (the, rowIndex, checked, eOpts) {
var record = the.up('grid').getStore().getAt(rowIndex);
return (record.get('usersSetId') != -1);
}
}
source to share
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if(record.data.taskStatus == 'Success' || record.data.acknowledgeBak == true){
metaData.css = " x-item-disabled";
}
return (new Ext.grid.column.CheckColumn).renderer(value);
},
listeners: {
beforecheckchange: function (the, rowIndex, checked, eOpts) {
var record = the.up('grid').getStore().getAt(rowIndex);
return (record.get('taskStatus') != "Success" && record.get("acknowledgeBak") != true);
}
},
source to share