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

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

score 1 · Accepted Answer

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

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

1 — 不需要注册的项目
2 — 注册项目
3 — 未注册项目

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

score 0 · Accepted Answer

我相信当您单击标题时 rowIndex 将为 0 ......添加怎么样

if(rowIndex == 0) return;

到 renderFunction 的顶部？

score 0 · Accepted Answer

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

    //#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 - 在 ExtJS 自定义渲染器中，如何判断列标题是否已被单击？

3 回答 3

Related

Reference