ExtJs 在gridPanel中每一行内combobox的二级联动

qq_35234003

于 2020-03-23 12:19:01 发布

阅读量692

点赞数 1

分类专栏： ExtJs 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35234003/article/details/105045880

版权

ExtJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ExtJs 在gridPanel中每一行内combobox的二级联动

前置

extjs版本 3.X
前端没有html代码，都是由extjs写就，最后渲染而成

需求

一个gridPanel中的每一行都有两列是combobox，这两个combobox是联动的，且行与行之间不应该相互影响

效果如图，显示的是第一级combobox
在这里插入图片描述

初始解决方法

为第一个combobox添加“select”事件，将选中的参数（我的是id）传递给第二个combobox，让第二个combobox的数据顺利加载

   com1.on("select",function(thisCom,rds,index){
   	com2.getStore().baseParams["id"] = thisCom.getValue();
   	com2.getStore().load();
})

如此可以实现combobox的二级联动，但存在问题。

问题

此时的二级联动会存在行与行之间的相互影响，即选择第一行的第一个combobox后，直接选择第二行的第二个combobox，发现，此时第一行的第一个combobox和第二行的第二个combobox联动。有问题！！！

原因分析

查看被渲染后的html（IE 11环境），发现combobox最终被渲染成input，且只有当出现下拉框的时候才会是input，否则不是。如图：

此为第一行未选中渲染后的html（未出现下拉框,没选择，所以没文字）

2.此为第二行被选中后渲染成的html（出现下拉框）

由此，可得结论，实际上整个gridPanel中（无论多少行）只有两个combobox，仅当被选中（出现下拉框）时，才会被渲染成input。

解决方法

搞一个数组，用于记录第一个combobox被选中的参数，数组的下标为当前行的行号。
为第二个combobox添加beforeQuery事件，从数组中取出对应行的参数，然后再加载数据。

com1.on("select",function(thisCom,records,index){
				var nowRow = gridPanel.getSelectionModel().getSelected();
				var nowRowIndex = gridPanel.getStore().indexOf(nowRow);
				ids[nowRowIndex] = thisCom.getValue();
			 });
com2.on("beforequery",function(e){
				var combo = e.combo;
				var nowRow_T = gridPanel.getSelectionModel().getSelected();
				var nowRowIndex_T = gridPanel.getStore().indexOf(nowRow_T);
				if(ids[nowRowIndex_T] != undefined && ids[nowRowIndex_T] != null){
					
					delete combo.lastQuery;//清除上一次combobox加载的数据缓存
					combo.getStore().baseParams["参数"] = ids[nowRowIndex_T];
					combo.getStore().load();
					combo.clearValue();
					combo.setValue("");
					combo.setRawValue("");
				});

删除表格中的某一行出现的问题

删除某一行后，联动发送紊乱，即有四行：1，2，3，4
删除第三行后，变为1，2，4（以为的），此时选择第四行的第二个combobox，却出现原来第三行的数据。
原因：当某一行被删除后，gridPanel会对其内的数据进行重排，所以第三行被删除后，实际上是1，2，3（原来的第四行）
解决方法：获取被删行的行号，从此行开始，将参数数组的每一个向前移动 1.
某一行被删除后，有一些二级combobox的显示值不能显示，但实际值是正常使用的，即RawValue不能显示，value正常。
原因：gridPanel发送重排，但是之前的数据缓存被清除了，仅仅记录了value值（和gridPanel的col设置的dataIndex对应）
解决方法：
只store.remove(),但不commitChange()
重新加载所有的二级combobox的值(即此时不考虑一级combo的影响)以获得文字.
在二级combobox的beforeQuery中恢复一二级联动.

  if(retstr=="success"){
  					Ext.Msg.alert("提示","删除成功！");
  					var index_D = store.indexOf(rd);//rd为选中的数据行
  					
  					store.remove(rd);
  			        	
  				
  					//从index_D开始，依次将ids中的id向前移动一位，防止重排后，选中行与ids中的不一致
  					//导致combobox联动出错
  					for(var k = index_D; k < ids.length-1;k++){
  						ids[k] = ids[k+1];
  					}
  					ids[k+1] = undefined;
  					com2.getStore().baseParams["flag"] = "all";//传递参数以获取所有属于二级的数据
  					com2.getStore().reload()；		                   
  				}