Extjs 4.0 Grid 跳动问题研究-优快云博客

本文分享了作者在使用电脑时遇到的大bug及购买高性价比台式机的经历，并深入探讨了在使用Extjs4.0Grid组件时遇到的跳动问题及解决方案。主要介绍了两种解决思路：一是通过监听取消来优化selModel配置，二是通过复写原类的方式解决focus问题。文章旨在为开发者提供实用的技术指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天真是很开心，非常非常的开心，因为解决了大bug。嘿嘿开心的还有我买了一个电脑

配置还行：E6600，2G，1TB,1G独显，HG6450显卡

超值的是才3100.哈哈还是品牌机，我的天，这么搞，果断下单买了，主要是我一般都是用笔记本的

想想还是弄个台式机比较舒服，开发玩游戏都是很好。开发一台电脑真的不够用。过几天再弄个2G内存

爽了

言归正传，主要讲述Extjs 4.0 Grid 跳动的问题调查发现主要是selModel的问题

解决方案1：监听取消

代码如下：

selModel: Ext.create('Ext.selection.Model', { listeners: {} })

在Extjs Blog中找到。比较麻烦的事如果不用Ext.selection.Model,那么上面的方法就不好使

解决方案2 ：复写原类

Extjs 4.0 Grid跳动的主要原因是focus的问题

官网的话：

BrowserBug: WebKit & IE refuse to focus the element, rather it will focus it and then immediately focus the body. This

temporary hack works for Webkit and IE6. IE7 and 8 are still broken

代码如下：

Ext.override(Ext.selection.RowModel, {
    onRowMouseDown: function (view, record, item, index, e) {
        this.selectWithEvent(record, e);
    }
});

或者:

Ext.override(Ext.selection.CheckboxModel, {
      onRowMouseDown: function(view, record, item, index, e) {
         var me = this;
         var checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
        if (!me.allowRightMouseSelection(e)) {
            return;
        }

        if (me.checkOnly && !checker) {
            return;
        }

        if (checker) {
            var mode = me.getSelectionMode();
            if (mode !== 'SINGLE') {
                me.setSelectionMode('SIMPLE');
            }
            me.selectWithEvent(record, e);
            me.setSelectionMode(mode);
        } else {
            me.selectWithEvent(record, e);
        }
    }
});

Ext.override(Ext.grid.plugin.CellEditing, {
      cancelEdit: function() {
        var me = this,
            activeEd = me.getActiveEditor(),
            viewEl = me.grid.getView().getEl(me.getActiveColumn());

        me.setActiveEditor(null);
        me.setActiveColumn(null);
        me.setActiveRecord(null);
        if (activeEd) {
            activeEd.cancelEdit();
        }
      },
	  startEdit: function(record, columnHeader) {
        var me = this,
            value = record.get(columnHeader.dataIndex),
            context = me.getEditingContext(record, columnHeader),
            ed;

        record = context.record;
        columnHeader = context.column;

        me.completeEdit();

        context.originalValue = context.value = value;
        if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
            return false;
        }

        if (columnHeader && !columnHeader.getEditor(record)) {
            return false;
        }

        ed = me.getEditor(record, columnHeader);
        if (ed) {
            me.context = context;
            me.setActiveEditor(ed);
            me.setActiveRecord(record);
            me.setActiveColumn(columnHeader);

            me.editTask.delay(15, ed.startEdit, ed, [me.getCell(record, columnHeader), value]);
        }
    	},    
		onEditComplete : function(ed, value, startValue) {
        var me = this,
            grid = me.grid,
            sm = grid.getSelectionModel(),
            activeColumn = me.getActiveColumn(),
            dataIndex;

        if (activeColumn) {
            dataIndex = activeColumn.dataIndex;

            me.setActiveEditor(null);
            me.setActiveColumn(null);
            me.setActiveRecord(null);
            delete sm.wasEditing;

            if (!me.validateEdit()) {
                return;
            }
            if (value !== startValue) {
                me.context.record.set(dataIndex, value);
            } 
            me.context.value = value;
            me.fireEvent('edit', me, me.context);
        }
    }
});