Ext.js 锁定列

717 阅读1分钟

//可锁定复选框列

        var smLock = new Ext.grid.CheckboxSelectionModel({
        	singleSelect : false,
        	handleMouseDown : function(g, rowIndex, e) {
        		if (e.button !== 0 || this.isLocked()) {
        			return;
        		}
        		var view = this.grid.getView();
        		if (e.shiftKey && !this.singleSelect
        		&& this.last !== false) {
        			var last = this.last;
        			this.selectRange(last, rowIndex, e.ctrlKey);
        			this.last = last;
        			view.focusRow(rowIndex);
        		} else {
        			var isSelected = this.isSelected(rowIndex);
        			if (isSelected) {
        				this.deselectRow(rowIndex);
        			} else if (!isSelected || this.getCount() > 1) {
        				this.selectRow(rowIndex, true);
        				view.focusRow(rowIndex);
        			}
        		}
        	},
        	isLocked : Ext.emptyFn,
        	initEvents : function() {
        		Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
        		this.grid.on('render', function() {
        			var view = this.grid.getView();
        			view.mainBody.on('mousedown',
        			this.onMouseDown, this);
        			Ext.fly(view.lockedInnerHd).on('mousedown',
        			this.onHdMouseDown, this);
        		}, this);
        	}
        });

//锁定

        smLock.lock();

列锁定: 引入 ux/css/LockingGridView.css 使用

    var cm =  new Ext.ux.grid.LockingColumnModel()

锁定列加上: locked:true,

    var grid = new Ext.grid.GridPanel({})里

加上属性:

        view: new Ext.ux.grid.LockingGridView(),