文档章节

Ext疑难解决思路和实现方案

微尘鉴
 微尘鉴
发布于 2016/02/19 17:30
字数 528
阅读 125
收藏 2
ext

业务图例

 

业务要求:

1.将分页选中的数据全部显示在选中列表中

2.点击结果列表选择框触发选中和取消事件来向选中列表中增加或移除某一列(支持全部选中和全部取消)

3.点击选中列表的移除图标,该列从选中列表中移除,且结果列表该相同数据的选择框取消

4.跳到第一页,结果列表在选中列表存在的数据默认被选中

解决思路:

1.点击结果列表选择框触发选中和取消事件来向选中列表中增加或移除某一列(支持全部选中和全部取消)

selModel:  Ext.create('Ext.selection.CheckboxModel', {
 injectCheckbox:0,//checkbox位于哪一列,默认值为0
 mode:'multi',//multi,simple,single;默认为多选multi
 checkOnly:true,//如果值为true,则只用点击checkbox列才能选中此条记录
 allowDeselect:true,//如果值true,并且mode值为单选(single)时,可以通过点击checkbox取消对其的选择
 enableKeyNav:false,
 listeners: {
  select: function(model,record,index) {//record被选中时产生的事件
   alert("选中事件。。。");
  },
  deselect: function(model,record,index) {//取消选中时产生的事件
   alert("取消选中事件。。。");
  },
  selectionchange: function(model,selected) {//选择有改变时产生的事件
   alert("选择有改变事件。。。");
  }
 }
}),
//selType:"checkboxmodel",  //设置选择模式,设置成多选框的模式
multiSelect:true,   //设置成多选

2.点击选中列表的移除图标,该列从选中列表中移除,且结果列表该相同数据的选择框取消

var grids = me.registerItems.resultListGrid;
      grids.store.on("load",function(store) {
      var store = Ext.getCmp("duplicateGridId").getStore();
      Ext.Array.each(store.getRange(),function(record){
        if(array.indexOf(record.data.customerCode)!=-1){
         grids.getSelectionModel().select(store.indexOf(record.data),true);
        }
      });
},grids);

3.跳到第一页,结果列表在选中列表存在的数据默认被选中

  { text : '移除', resizable : false, sortable : false, align:'center', width:60,
         renderer:function(value,metadata,model,rows){  
           return '<a onclick="javascript:removerow('+model.data.customerCode+','+rows+');" style="text-decoration:none;"><img  data-qtip="移除" src="img/btn/delete.png" alt="移除"></a>';  
         }
}

function removerow(value,rows){
 debugger;
 Ext.getCmp("duplicateGridIdT").getStore().removeAt(rows);
 array.remove(value); 
 var stores = Ext.getCmp("duplicateGridId").getStore();
 Ext.Array.each(stores.getRange(),function(record){
  if(record.data.customerCode==value){
   Ext.getCmp("duplicateGridId").getSelectionModel().deselect(stores.indexOf(record.data));
  }
 });
}

 实现方案

© 著作权归作者所有

微尘鉴
粉丝 8
博文 80
码字总数 30075
作品 0
海淀
高级程序员
私信 提问
主流JS框架中DOMReady事件的实现

在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立...

山哥
2012/11/02
2.1K
12
PPT下载丨数据架构与优化沙龙精彩回顾

老规矩,PPT在这里! 云盘下载链接: https://pan.baidu.com/s/1SeDmRYWEdiDFYLrrxAFfw 随着大数据的发展,数据化变革已成为企业不可避免的挑战,如何选择变革的方向和方式、充分利用大数据资...

2018/08/08
0
0
ExtJS(6)- 用Sencha Cmd构建打包Ext项目

用ExtJS组建前端框架有一年多了,考虑到ExtJS中js过多,为提高效率,所以开始寻找打包的方法,然后就发现了这个Sencha Cmd。首先Sencha Cmd不仅仅是为了打包而生的,它同样具有构建前端框架的...

雪飘七月
2018/06/26
0
0
荐书 | 阿里巴巴中台战略思想与架构实战,还有……

想成为架构师,但对于发展方向和路径尚不明确?对企业组织架构发展、技术架构体系、系统架构细节知识尚有欠缺? dbaplus社群携手@博文视点 @图灵教育,推荐3本架构热门好书,帮助大伙儿更好地...

dbaplus社群
06/29
0
0
分析SELinux日志,排除SELinux疑难

觉得有用请顶一下,谢谢 你终有一天会被 SELinux 阻止你访问所需的东西,而且要解决这个问题。SELinux 拒绝某个文件、进程或资源被访问的基要原因有数个: 1 一个被错误标签的文件 2 一个进程...

拜仁慕尼黑
2013/03/25
487
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解表单脚本系列第二篇——表单字段

本文转载于:专业的前端网站➜深入理解表单脚本系列第二篇——表单字段 前面的话   表单字段又叫表单元素,表示表单所包含控件,如<input>、<select>等。本文将详细介绍表单字段的内容 访问...

前端老手
18分钟前
5
0
前端技术之:常用webpack插件

1、html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles. 主页地址: https://github.com/jantimon/html-webpack-plugin 安装方法: npm i --save-dev h......

popgis
24分钟前
6
0
IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1

HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证。并不是所有的主浏览器都支持新的input类型,不过我们可以在所有的主浏览器中使用它们,即使不被支持,仍然可以显示为...

老码农的一亩三分地
25分钟前
5
0
规则引擎

解决问题 版本迭代速度更不上业务变化,但是若多个业务同时变化,除了为每个业务设计专属配置项也不利于操作。就想服务接口单纯化,将复杂多变的业务逻辑交给规则引擎,让用户在web端或cs端自...

无极之岚
今天
7
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
今天
803
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部