PDA

View Full Version : Ext.ux.grid.CheckColumn -need to Disable check box



sureshcs
10 Aug 2013, 3:48 PM
Hi Friends,

I am using Ext.ux.grid.CheckColumn to render check boxes and the chekColumn inturn added to FlexGridPanel.
I wanted to disable the Check boxes based on some condition. Any help is highly appreciated.

Adding the code below:

var reportCheckColumn = new Ext.grid.CheckColumn({
header: '<div id="divId2" class="x-grid3-check-col">&#160;</div>'
,dataIndex: 'enable'
,width: 50
,fixed : true
,menuDisabled : true
,align: 'center'
,name :'rptChekColumn'
,headerId: 'airCustRptRes-enable'
})

var reportGrid = new FlexGridPanel({
plugins: [new Ext.ux.plugins.FitToDiv('DivId1')
<c:if test="${readOnly == false}">
,reportCheckColumn
</c:if>
],
renderTo: 'DivId',
frame: false,
columnLines: true,
stripeRows: true,
title: '',
id :'rptGrid',
height : 100,
width : "1000px",
store: reportStore,
viewConfig: { forceFit : true},
enableColumnHide: false,
enableColumnMove: false});

Please help.

Thanks
Suresh

slemmon
12 Aug 2013, 10:57 AM
The checkColumn in 3.x has a processEvent and renderer method to decorate the cells and listen to the click event, but there is nothing out of the box that disables the checkboxes. You'll have to extend the CheckColumn class and add your own disable/enable functionality and modify the renderer / processEvent methods to honor the disabled / enabled flag.

sureshcs
12 Aug 2013, 1:36 PM
Hi selmmon,

Very thanks for your reply.can u pls share any sample code for rendering and overriding the events in checkcolumn?

Thanks
Suresh

slemmon
12 Aug 2013, 3:04 PM
If you take a look at the source for the CheckColumn you'll see:



Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {


/**
* @private
* Process and refire events routed from the GridView's processEvent method.
*/
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {
var record = grid.store.getAt(rowIndex);
record.set(this.dataIndex, !record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},


renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
},


// Deprecate use as a plugin. Remove in 4.0
init: Ext.emptyFn
});


Basically you can just do the same thing and just make yours how you like



My.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {


/**
* @private
* Process and refire events routed from the GridView's processEvent method.
*/
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {

// do your checks in this method for disabled / enabled to determine how you process the event


var record = grid.store.getAt(rowIndex);
record.set(this.dataIndex, !record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},


renderer : function(v, p, record){

// and here you'll want to do your evaluation of the record or whatever shows you
// that this checkbox should be disabled or not and you can then return the below
// markup if enabled or a separate markup if disabled


p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
},


// Deprecate use as a plugin. Remove in 4.0
init: Ext.emptyFn
});