Question

我有一个带有自定义渲染器的ExtJs EditorGridPanel。基本思路是在需要注册项目时显示一个复选框，在项目已注册时显示已注册的文本。一切都在游泳，除了点击标题，整个网格重新渲染和每个单元格切换。此外，排序不起作用。如何判断标题何时被点击以便我的所有复选框都不切换？如何修复列的排序？现在它没有排序。在此先感谢您的帮助。

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

这是我的第二次尝试也失败了，尝试更新基础值并且不检查或取消选中。

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

发生切换问题是因为您在渲染过程中直接更新了每个记录的Registered属性。下次导致网格渲染时（例如，排序时），所有记录的Registered属性的值与它们开始时的布尔值相反。您可能不应该在渲染期间更改这些属性，而是在保存之前找到从复选框中获取正确值的方法。

对于排序，您可以在记录上手动创建一个包含专门用于排序的半任意值的数字属性。例如，调用属性RegisteredSort并为其指定以下值：

1 - 不需要注册的项目
2 - 注册项目
3 - 未注册的商品

然后，您使用RegisteredSort属性作为该列的dataIndex而不是Registered。

Answer 2

我相信当您点击标题时rowIndex将为0 ...如何添加

if(rowIndex == 0) return;

到renderFunction的顶部？

Answer 3

我最终做了一个自定义检查栏：

    //#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

在ExtJS自定义渲染器中，如何判断是否已单击列标题？

3 个答案: