ExtJs 4.2.1Grid行编辑后,页面滚动的解决方案

  前段时间,公司里做个新玩意儿,我们开发组选用ExtJs4.2.1Mvc模式,开发过程中遇到了很多问题(避免不了不专业的需求人员提出各种一拍脑瓜子就决定的需求),经过查看api都一一解决,现在把开发过程中遇到的且已解决的问题,记录下来,供以后查看,也供新接触ExtJs的网友借鉴,描述不到位或有错误的地方,望指正!(注:下文中提到的方法均为ExtJs库中的方法,并非js原生)

  因为整个项目都是运用的ExtJs的MVC,所以项目中基本都是js文件(自定义的js文件接近100个,更不用说ExtJs的库了),导致页面加载很慢,性能问题就不提了,这是个老大难问题!

问题1:

  关于Grid页面滚动的问题,现在有一个Ext.grid.Panel,在这个grid中有两类数据,一类是可用数据,另一类是禁用数据,可用数据正常显示,禁用的则灰色显示(灰色显示利用grid的viewConfig的getRowClass属性可以做到,seems like this:

  getRowClass : function(record,rowIndex,rowParams,store){
             return (record.get(‘youxiao1‘) == 0 || record.get(‘isedit‘) == 0) ? ‘row-valid‘ :‘ ‘;
        }

);

在这个grid中的两类数据是可以编辑的,当编辑后,为了实现两类数据不混乱显示,于是就用到了store.sort()方法,这个方法会导致grid内容出现滚动,用户不希望在编辑grid时总是滚来滚去,于是叫我们想想办法,于是我用了两天时间来完善这个需求(这过程中,使用了3中方式来实现,第三种方式最完美):

  方式一:直接使用focusRow( row, [delay] ),让某一行聚焦;

  方式二:获得当前编辑行和grid中第一行的record,然后通过getOffsetsTo()方法计算这两行记录在grid的垂直距离是多少,然后让滚动条滚动到这个距离值的位置,that‘s all!这个逻辑都在grid的viewConfig配置中实现,然后在编辑行后通过grid.getView().XXX()调用。在viewConfig中添加以下两个方法:

//滚动Grid到指定的Record  
        scrollToRecord:function(record){  
          var index = this.ownerCt.getStore().indexOf(record);  
          this.scrollToRow(index);  
        },  
        
        //滚动Grid到指定的行
        scrollToRow:function(rowIndex){  
          var firstRow = Ext.get(this.getNode(0));    //grid中第一行
          var row = Ext.get(this.getNode(rowIndex));   //当前编辑行
          var distance = row.getOffsetsTo(firstRow)[1];  //获取垂直距离
          //this.scroller.dom.scrollTop = distance;    this.scroller在Ext4.x中似乎没有这个属性,它只存在于3.x?
          this.getEl().setScrollTop(distance);  //设置滚动条
        }

  方式三:虽然前两种方式也能满足需求,但是不完美,现在说说最完美的解决方案,也是最简单的。

  在编辑行之前,先获得当前滚动条的位置:var scrollTop = grid.getView().getEl().getScrollTop(); //排序之前,grid滚动条的scrollTop

  在编辑结束之后,再将滚动条滚回最开始的位置:grid.getView().getEl().setScrollTop(scrollTop);

如果我们的Grid中有固定列,就是有些column设置了locked:true这个属性的话,就不能用上面的方法,将会无效,因为有locked的grid的view不能直接获取到,它分为lockedView、normalView,在进行滚动时,要两个view都进行滚动,否则会出现表格错位的现象哦~~,知道这点以后,其他设置就和上面的一直了!

问题1完毕!

时间: 2024-11-12 18:49:37

ExtJs 4.2.1Grid行编辑后,页面滚动的解决方案的相关文章

移动页面滚动穿透解决方案(荐)

移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案: 解决方案1:阻止冒泡. //关键代码 $(".sliders,.modals").on("touchmove",function(event){ event.preventDefault(); }); 全部代码附上: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m

Jquery easyui开启行编辑_增删改操作及新增就能编辑

下面这个是一个单独的js文件,可以直接在页面引入他就可以用了 主要有三种方式实现编辑模式增删改操作 1.直接双击选中编辑 2.选中行点击修改按钮编辑 3.右键选择相关的操作 可能中间有部分功能没有实现 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!-- 引入自定义的js文件 --> <script type="t

jqGrid行编辑配置

jqGrid行编辑配置,方法,事件 行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置colModel来实现.完成修改后,按下"enter"键提交数据到服务器. 软件要求和安装 要使用行编辑功能,需要在jqGrid下载页面勾选Inline Editing和Common modules,然后下载.下载地址:http://www.trirand.c

jqGrid行编辑配置,方法,事件

行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置colModel来实现.完成修改后,按下“enter”键提交数据到服务器. 软件要求和安装 要使用行编辑功能,需要在jqGrid下载页面勾选Inline Editing和Common modules,然后下载.下载地址:http://www.trirand.com/blog/?page_id=6 要看元代

Bash命令行编辑

1.Readline库和命令行编辑 bash shell提供了两个内置编辑器:emacs和vi,利用它们可以以交互模式对命令行列表进行编辑,这项特性是通过Readline库的软件包实现的.当使用命令行编辑功能时,无论是vi还是emacs模式,都是readline的函数决定哪一个键对应哪一项功能.例如,使用emacs模式,则Ctrl-P允许在历史列表中向上滚动. 2.设置命令行编辑器 内置emacs编辑器是默认的内置编辑器.#set -o vi //设置vi为命令行编辑器 #set -o emac

jqgrid 实现行编辑,表单编辑的列联动

这个问题的场景相信大家都遇到过,比如有A,B,C三列,B,C列均为下拉框,但是C列的值是由B列的值来决定的,即C列中的值是动态变化的,变化的依据就是B列中你选择的值.本文给出的是一个实用,简易快捷的实现方式.先看图: 本例子实现的如果是常白班,则班别那一列只显示白班,否则的话,那就显示白晚班.可以看成是两列联动. 实现核心代码为: onSelectRow: function (id) { if (id && id !== lastSel) { jQuery("#TblClassT

ligerui grid行编辑示例

<%@ page contentType="text/html; charset=UTF-8" %> <% String path = request.getContextPath(); %> <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Simple Data</TITLE> <meta http-equiv="content-t

命令行编辑

光标跳转: crtl+a: 跳到命令行首 crtl+e: 跳到命令行尾 crtl+d: 删除光标后的单个字符 crtl+w: 删除光标前的单词 crtl+k: 删除光标后的所有 crtl+u: 删除光标前的所有 ctrl+l: 清屏 命令历史: 查看命令历史:history -c: 清空命令历史 -d: 删除指定位置的命令 -w: 保存命令历史至历史文件中 环境变量 PATH: 命令搜索路径 HISTSIZE: 命令历史缓冲区大小 命令历史的使用技巧 !N: 执行命令历史中的第N条命令 !-N:

DataGridView编辑后立即更新到数据库的两种方法

DataGridView控件是微软预先写好的一个显示数据的控件,功能非常强大,可以显示来自数据库表的数据和XML等其他来源的数据.最近在做一个迷你超市管理系统,要大量用到这个控件.所以花时间好好研究了下. 这是迷你超市管理系的库存数据DataGridView,用户一定会想如果能直接在DGV中修改数据就好了. 是的,这是一个很好的想法,这个功能微软早就帮我们想到了,现在可以使两种方法加以实现.下面就来介绍一下他们. 第一张方法:基于DataAdapter对象创建一个CommandBulider,用