2

ExtJs3.4を使用しています。ExtJsグリッドにチェックボックスコントロールがあります。ストア内の値がゼロに等しい場合に基づいて、チェックボックスコントロールを無効にしたい。

私はこれを試しましたが、無効にはなりません：

var colModel = new Ext.grid.ColumnModel(
    {
        columns: [
            { id: 'AircraftOid', header: "AircraftOid", width: 100, sortable: true, locked: true, dataIndex: 'AircraftOid', 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'
            }
        ],
        isCellEditable: function (col, row) {
            return false;
        }
    });

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

前もって感謝します。

4

1 に答える 1

2

あなたの考えは正しかった。だが...

まず、編集を防ぐために、列モデルのisCellEditableメソッドをオーバーライドします。ただし、Gridはそのメソッドを呼び出しません。EditorGridでのみ機能します。

次に、Ext.ux.grid.CheckColumnは編集可能な機能を処理しません。これはエディターではなく、単なる列であるためです。

そのため、私のプロジェクトでは、エディターとして機能するようにプロジェクトを変更し、通常のグリッドでの編集を防ぐためにreadOnlyプロパティを追加しました。readOnlyをtrueに設定すると、クリックできなくなります。

Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
    processEvent : function(name, e, grid, rowIndex, colIndex) {
        if ( !this.readOnly && name == 'mousedown' ) {
            grid.stopEditing();
            var record = grid.store.getAt(rowIndex);
            var cm = grid.getColumnModel();
            var edit_e = {
                grid: grid,
                record: record,
                field: this.dataIndex,
                value: record.data[this.dataIndex],
                row: rowIndex,
                column: colIndex,
                cancel: false
            };
            if ( grid.fireEvent( 'beforeedit', edit_e ) !== false && !edit_e.cancel ) {
                record.set( this.dataIndex, !record.data[this.dataIndex] );
                edit_e.cancel = null;
                grid.fireEvent( 'afteredit', edit_e );
            }
            return false;
        } else {
            return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
        }
    },

    editable : false,

    readOnly : false,

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

    init: Ext.emptyFn
});

Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;
于 2012-07-11T22:22:55.050 に答える