`

Extjs 4.0 Grid 跳动问题研究

 
阅读更多

 

今天真是很开心,非常非常的开心,因为解决了大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);
        }
    }
});
 

 

 

1
1
分享到:
评论

相关推荐

    ssh+extjs4.0grid增删改查

    在"ssh+extjs4.0grid增删改查"这个主题中,我们将深入探讨如何将SSH框架与Ext JS 4.0 Grid集成,实现数据的CRUD(Create, Read, Update, Delete)功能。 1. **Struts2整合Hibernate**: - 配置Struts2-Hibernate...

    EXTJS4.0视频教程配套代码

    第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    ExtJs4.0 手册中文版

    在《ExtJs4.0 手册中文版》中,你可以找到关于ExtJS 4.0的全面介绍和详细指南。这个手册涵盖了框架的基础知识,如MVC架构、组件系统、数据绑定以及事件处理机制。此外,它还深入讲解了如何使用各种组件,如GridPanel...

    extJs4.0 开发手册源码

    EXTJS4.0是Sencha公司推出的一款强大的JavaScript前端框架,专用于构建富客户端Web应用程序。这个"EXTJS4.0开发手册源码"包含了...如果你计划使用EXTJS4.0开发复杂的Web应用程序,深入研究这个源码将是非常值得的投资。

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

    EXTJS4.0视频教程 30集 下载地址

    ### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...

    ExtJs4.0官方版本

    ExtJS 4.0是Sencha公司开发的一款强大的JavaScript前端框架,主要用于构建富客户端Web应用程序。这个官方版本的发布标志着ExtJS在功能、性能和可维护性方面的一个重要里程碑。以下将详细介绍ExtJS 4.0中的核心概念、...

    ssh框架+extjs4.0grid实例

    在这个实例中,SSH框架与ExtJS 4.0结合,提供了强大的前端展示和后端数据处理能力。 Struts2是MVC(Model-View-Controller)架构模式的一种实现,它负责处理HTTP请求,执行业务逻辑,并将结果呈现给用户。Struts2...

    ssh+extjs4.0grid删除数据

    这里我们关注的是如何在SSH框架下,结合ExtJS 4.0版本的Grid组件实现数据的删除操作。 首先,让我们理解SSH框架。Spring提供了依赖注入和事务管理,Struts处理MVC(模型-视图-控制器)架构,而Hibernate则作为ORM...

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    ExtJs4.0入门教程

    ExtJs4.0入门教程,详细介绍ExtJs4.0。

    EXTjs4.0学习文档

    EXTJS 4.0 学习文档 EXTJS 4.0 是一个面向开发 RIA 的 AJAX 应用,是一个用 JavaScript 写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 AJAX 框架。它能够帮助我们在页面上快速而简单构建各种各样的...

    extjs4.0技术

    ### Extjs4.0 技术详解 #### 一、Extjs4.0 概述与获取 **Extjs4.0** 是一款强大的企业级前端框架,它可以帮助开发者快速构建复杂的用户界面,并且提供了丰富的组件和功能。对于初学者来说,理解其核心概念和基础...

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    EXTJS4.0视频教程配套代码包含action类

    EXTJS4.0是一款强大的JavaScript框架,用于构建富客户端Web应用程序。这个视频教程配套代码主要涉及EXTJS4.0中的action类,这是EXTJS中处理服务器端交互的关键部分。在EXTJS中,action类通常指的是Ext.Ajax或Ext....

    Extjs4.0基础学习指南

    一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载

    extjs 4.0 日期时间控件

    ExtJS 4.0 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一系列强大的组件,包括日期和时间选择器,使得用户界面更加友好和交互。在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架...

    Extjs 4.0发布啦

    最新Extjs4.0 所有文件,含案例,帮助文档,源代码

    extjs 4.0 extjs

    标题提到的是ExtJS的4.0版本,这是一个重要的里程碑,因为它引入了许多新功能和改进,与之前的2.0和3.0版本有显著区别。 在ExtJS 4.0中,最显著的变化之一是其模型-视图-控制器(MVC)架构的增强。这个版本提供了更...

Global site tag (gtag.js) - Google Analytics