In an ExtJS custom renderer how do I tell if the column header has been clicked?

Question

I have an ExtJs EditorGridPanel with a custom renderer. The basic idea is to display a checkbox when an item needs to be registered and the text Registered when an item is already registered. Everything is working swimmingly except for when clicking on the header, the entire grid re-renders and every cell toggles. Furthermore, the sort does not work. How to I tell when the header has been clicked so that all my checkboxes do not toggle? How do I fix the sort for the column? Right now it does not sort. Thanks in advance for your help.

var colModel = new Ext.grid.ColumnModel(
    {
    columns: [
        { id: 'ItemOid', header: "ItemOid", width: 100, sortable: true, locked: true, dataIndex: 'ItemOid', hidden: true },
        { id: 'nNumber', header: "N-#", width: 100, sortable: true, locked: true, dataIndex: 'NNumber' },
        { header: "Make", width: 150, sortable: true, dataIndex: 'Make' },
        { header: "Model", width: 150, sortable: true, dataIndex: 'Model' },
        { header: "Register",
            width: 55,
            sortable: true,
            dataIndex: 'Register',
            xtype: 'checkcolumn',
            renderer: renderFunction
        }
    ]
    });

function renderFunction(value, metaData, record, rowIndex, colIndex, store) {

    if (!store.getAt(rowIndex).data['ItemNeedsRegistered'])
        return 'Registered';

    var isRegistered = store.getAt(rowIndex).data['Registered'];
    var renderString;

    if (initialItemRender || isRegistered) {
        renderString = '<input type="checkbox" id="chkRegistered' + rowIndex + '" />';
        store.getAt(rowIndex).data['Registered'] = false;
    } else {
        renderString = '<input type="checkbox" checked="yes" id="chkRegistered' + rowIndex + '" />';
        store.getAt(rowIndex).data['Registered'] = true;
    }

    return renderString;
}

var grid = new Ext.grid.EditorGridPanel({
        store: itemStore,
        cm: colModel,
        sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
        viewConfig: {
            forceFit: true
        },
        height: 100,
        split: true,
        region: 'north'
    });

Here is my second attempt that also fails, by trying to update the underlying value and it does not check or uncheck.

function renderFunction(value, metaData, record, rowIndex, colIndex, store) {

    if (!store.getAt(rowIndex).data['ItemNeedsRegistered'])
        return 'Registered';

    var isRegistered = store.getAt(rowIndex).data['Registered'];
    var renderString;

    if (initialItemRender || !isRegistered) {
        renderString = '<input type="checkbox" id="chkRegistered' + rowIndex + '"' 
        + ' onClick="updateStoreOnClick(' + rowIndex + ', true);"'
        + ' />';
    } else {
        renderString = '<input type="checkbox" checked="yes" id="chkRegistered' + rowIndex + '"'
        + ' onClick="updateStoreOnClick(' + rowIndex + ', false);"'                
        + ' />';
    }

    return renderString;
}

function updateStoreOnClick(rowIndex, value) {
    store.getAt(rowIndex).data['Registered'] = value;
}

Answer 1

I ended up doing a custom check column:

    //#region Custom Check Column
    AVRMS.AircraftRegisterCheckColumn = 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);

                if (grid.store.getAt(rowIndex).data['AircraftNeedsRegistered'])
                    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, rec, rowIndex, colIndex, store) {
            if (!store.getAt(rowIndex).data['AircraftNeedsRegistered'])
                return store.getAt(rowIndex).data['Status'];

            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
    });

    Ext.reg('airRegChkCol', AVRMS.AircraftRegisterCheckColumn);

    // register ptype. Deprecate. Remove in 4.0
    Ext.preg('airRegChkCol', AVRMS.AircraftRegisterCheckColumn);

    // register Column xtype
    Ext.grid.Column.types.airRegChkCol = AVRMS.AircraftRegisterCheckColumn;

    //#endregion

//#region ColumnModel
var colModel = new Ext.grid.ColumnModel(
    {
        columns: [
            { id: 'AircraftOid', header: "AircraftOid", width: 100, sortable: true, locked: true, hideable: false, dataIndex: 'AircraftOid', hidden: true, menuDisabled: true },
            { id: 'nNumber', header: "N-Number", width: 75, sortable: true, locked: true, hideable: false, dataIndex: 'NNumber', menuDisabled: true },
            { header: "Make", width: 150, sortable: true, hideable: false, dataIndex: 'Make', menuDisabled: true },
            { header: "Model", width: 150, sortable: true, hideable: false, dataIndex: 'Model', menuDisabled: true },
            {
                header: "Airworthy",
                width: 75,
                sortable: true,
                hideable: false,
                dataIndex: 'Airworthy',
                menuDisabled: true,
                renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                    if (value == true)
                        return 'Yes';
                    return 'No';
                },
                editor: new Ext.form.ComboBox({
                    id: 'makeCombo',
                    typeAhead: true,
                    store: airworthy,
                    triggerAction: 'all',
                    forceSelection: true,
                    mode: 'local',
                    allowBlank: false,
                    selectOnFocus: true,
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                })
            },
            {
                id: 'Register',
                header: "Select to Register",
                width: 75,
                sortable: true,
                dataIndex: 'Register',
                xtype: 'airRegChkCol',
                hideable: false,
                menuDisabled: true
            }]
    });


//#endregion

//#region grid
var grid = new Ext.grid.EditorGridPanel({
    store: aircraftStore,
    cm: colModel,
    sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
    viewConfig: {
        forceFit: true
    },
    height: 100,
    split: true,
    region: 'north'
});
//#endregion