Get cell div id using beforecheckchange listener in extjs grid cell editing

Question

I am using beforeCheckChange listener for checkColumn in extjs grid cell editing.

Once unchecked, I want remove the dirty flag for this cell. So I am trying to remove "x-grid-dirty-cell" Cls, using cell div id.

Ext.select("ext-gen2654").removeCls('x-grid-dirty-cell');

Following is listener

listeners: {
    beforecheckchange: me.onCheckcolumnBeforeCheckChange
}

onCheckcolumnBeforeCheckChange: function(comp, rowIndex, checked, eOpts) {  
    Ext.select("ext-gen2654").removeCls('x-grid-dirty-cell');
}

How do I get the div id for this cell only?

Let me know if we have any alternative to remove dirty record after uncheck.

Edited- display checkbox for alternative records

Ext.getCmp('grid').gridColumns[0]=  {
    xtype: 'checkcolumn',                                               
                dataIndex: 'SELECT',
                width: 55,
                stopSelection: true,
                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                if(row%2==0){  // i need to display alternative checkbox
                    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 + '"/>';
                        }

            }

,

try listener code to remove dirty mark, but no luck

    onCheckcolumnBeforeCheckChange: function(comp, rowIndex, checked, eOpts) {  
        var store=Ext.getCmp('grid').getStore();
        var record= store.getAt(rowIndex);
        if(checked==true){  
        record.dirty= false;
        record.commit();    
        store.commitChanges();

        }

Alexander Alexander · Accepted Answer · 2016-03-17T14:43:10

If you want to remove the dirty flags for the whole grid, use markDirty on the grid view:

viewConfig:{
    markDirty:false
}

If you want to remove the dirty flags for the whole column only, just set a tdCls on the column:

tdCls:'doNotMarkDirty',

and add the following CSS (tested in Classic theme, may be different for other themes):

.doNotMarkDirty.x-grid-dirty-cell {
    background-image:none;
}

If you want to remove the dirty flags for the whole column, AND have the model ignore any changes made to the column, try adding a custom isModified function to the model definition:

isModified:function(dataIndex) {
      if(dataIndex=="myDataIndex") return false;
      me.callParent(arguments);
}

If you want to let a record know that it is no longer dirty, check out record.commit().

Get cell div id using beforecheckchange listener in extjs grid cell editing

1 Answers