Tab BeforeTabChange() destroy()无法销毁子控件

hks2002

Tab中设置了beforeactivechanged="onBeforeTabChange", 每个tab中含有一个datagrid

1. function onBeforeTabChange(e) {
   
2.     var tabs = mini.get(e.sender.id);
   
3. 
   
4.     var el = tabs.getTabBodyEl(e.tab);
   
5.     var ctls = mini.getChildControls(el);
   
6.     for(var i=0,l=ctls.length;i<l;i++){
   
7.         ctls[i].destroy();
   
8.     }  
   
9. }
   
10. 
    
11. function refreshPage()
    
12. {
    
13.      mini.findControls(function(control){
    
14.        if(control.type == "datagrid") {
    
15.            control.load();
    
16.        }
    
17.   });  
    
18. 
    
19. }
    
20. var refreshInterval=setInterval("refreshPage()",5000);

复制代码

以上代码定时执行的时候, 新增的tab的datagrid会在findControls中找到, 非活动状态的tab中的datagrid 虽然用了destroy()方法,仍然会在findControls中找到, 这个哪里出问题了?
甚至, 我把整个tabs都动态删掉了, dataGrid仍然在定时发送请求.

dforce

html中绑定事件需要用onbeforeactivechanged="onBeforeTabChange"
有问题的话，请把整个页面发出来，回复高级模式可以打包。

hks2002

dforce 发表于 2017-12-6 17:11
html中绑定事件需要用onbeforeactivechanged="onBeforeTabChange"
有问题的话，请把整个页面发出来，回复高 ...

已经是绑定了的, 而且调试的时候,也进入到了destroy()那一步,
我的页面是动态拼接成的, 整个页面复制不太方便, 里面的函数都是分离编写的.

1. <div id="subTabs" class="mini-tabs" activeindex="1" style="width:100%;height:100%;" bodystyle="border:0;" onbeforeactivechanged="onBeforeTabChange" onactivechanged="onTabChange" maskonload="false">

复制代码

tabs的定义是这样的

1. <div id="subTabs" class="mini-tabs" activeindex="1" style="width:100%;height:100%;" bodystyle="border:0;" onbeforeactivechanged="onBeforeTabChange" onactivechanged="onTabChange" maskonload="false">

复制代码

hks2002

hks2002 发表于 2017-12-6 17:31
已经是绑定了的, 而且调试的时候,也进入到了destroy()那一步,
我的页面是动态拼接成的, 整个页面复制不 ...

我构造了一个界面:可以重现了

1. <div class="mini-tabs" activeindex="1" onbeforeactivechanged="onBeforeTabChange">
   
2.     <div title="Tab1" >
   
3.           <div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
   
4.                 url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" >
   
5.                 <div property="columns">
   
6.                     <div type="indexcolumn"></div>               
   
7.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
   
8.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>   
   
9.                     <div header="工作信息">
   
10.                         <div property="columns">
    
11.                             <div field="dept_name" width="120">所属部门</div>
    
12.                             <div field="position_name" width="100">职位</div>
    
13.                             <div field="salary" width="100" allowSort="true">薪资</div>
    
14.                         </div>
    
15.                     </div>
    
16.                 </div>
    
17.             </div>
    
18.     </div>
    
19.     <div title="Tab2" iconCls="icon-cut" >
    
20.            <div id="datagrid2" class="mini-datagrid" style="width:700px;height:250px;"
    
21.                 url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" >
    
22.                 <div property="columns">
    
23.                     <div type="indexcolumn"></div>               
    
24.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
    
25.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>   
    
26.                     <div header="工作信息">
    
27.                         <div property="columns">
    
28.                             <div field="dept_name" width="120">所属部门</div>
    
29.                             <div field="position_name" width="100">职位</div>
    
30.                             <div field="salary" width="100" allowSort="true">薪资</div>
    
31.                         </div>
    
32.                     </div>
    
33.                 </div>
    
34.             </div>
    
35.     </div>
    
36.     <div title="Tab3" showCloseButton="true">
    
37.             <div id="datagrid3" class="mini-datagrid" style="width:700px;height:250px;"
    
38.                 url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" >
    
39.                 <div property="columns">
    
40.                     <div type="indexcolumn"></div>               
    
41.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
    
42.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>   
    
43.                     <div header="工作信息">
    
44.                         <div property="columns">
    
45.                             <div field="dept_name" width="120">所属部门</div>
    
46.                             <div field="position_name" width="100">职位</div>
    
47.                             <div field="salary" width="100" allowSort="true">薪资</div>
    
48.                         </div>
    
49.                     </div>
    
50.                 </div>
    
51.             </div>
    
52.     </div>
    
53.     <div title="Tab4" showCloseButton="true" enabled="false">
    
54.         4
    
55.     </div>
    
56. </div>
    
57. <script type="text/javascript">
    
58. function onBeforeTabChange(e) {
    
59.     var tabs = mini.get(e.sender.id);
    
60. 
    
61.     var el = tabs.getTabBodyEl(e.tab);
    
62.     var ctls = mini.getChildControls(el);
    
63.     for(var i=0,l=ctls.length;i<l;i++){
    
64.         ctls[i].destroy();
    
65.     }  
    
66. }
    
67. 
    
68. function refreshPage()
    
69. {
    
70.   mini.findControls(function(control){
    
71.        if(control.type == "datagrid") {
    
72.            control.load();
    
73.        }
    
74.   });  
    
75. 
    
76. }
    
77. var refreshInterval=setInterval("refreshPage()",5000);
    
78. </script>

复制代码

这个例子的ajax请求会不停的发送, 虽然页面中的datagrid被清理掉了(看不到了).

felt

hks2002 发表于 2017-12-6 17:45
我构造了一个界面:可以重现了

1 首先你这方法使用的有问题，findControls只是一个查找方法，内部不能执行操作
var grids = mini.findControls(function (control) {
                if (control.type == "datagrid") {
                    return true;
                }
  });
2 可以这样测试，请看一下我上传的例子，切换之后按按钮，可以找到页面所有的grid，这个数量是真实的。

hks2002

felt 发表于 2017-12-7 09:35
1 首先你这方法使用的有问题，findControls只是一个查找方法，内部不能执行操作
var grids = mini.findCo ...

太感谢了, 建议论坛上总结一些错误用法集, 用户使用前通读,这样可以有意识的避免, 不然按jquery的习惯, 会踩不少坑, 这样挺折腾的.

hks2002

felt 发表于 2017-12-7 09:35
1 首先你这方法使用的有问题，findControls只是一个查找方法，内部不能执行操作
var grids = mini.findCo ...

问题还是存在.
按照http://miniui.com/bbs/forum.php? ... B%E6%8E%A7%E4%BB%B6

var div=document.getElementById(id);
var controls=mini.getChildControls(div);    //根据dom元素获取所有内部控件
$(controls).each(function(i,item){
    item.destroy();
})这里已经已经删掉了,

控件还是存在, 还是会继续发送ajax请求function refreshPage()
{
   var grids= mini.findControls(function(control){
       if(control.type == "datagrid") {
           return true;
       }
  });

   console.log("grids count:"+grids.length);
   reloadGrids(grids);
}
只要设定了定时:var refreshInterval = setInterval("refreshPage()", 5000); grid的数量就不会减少了.
//grids.length 还是包含了,已经删掉的控件, 即使我的整个tabs已经动态删掉.findControls()是不是有问题呀?求证


对比用jq的方法, jq选择器可以返回正确的grid数量.
function getGrids() {
            var grids = mini.findControls(function (control) {
                if (control.type == "datagrid") {
                    return true;
                }
            });
            var len = $(".mini-datagrid").length;

           console.log("mini:"+grids.length);
           console.log("JQ:"+len);
}
用下面的方法也可以获得正确的grid数量.
var ctls = mini.getChildControls(document); //根据dom元素获取所有内部控件
var grid2=$(ctls).filter(function(i,ctl){
      if (ctl.type == "datagrid") {
        return ctl;
        }
  });


所以findControls()这个方法肯定是不太正常的.

felt

hks2002 发表于 2017-12-16 23:18
问题还是存在.
按照http://miniui.com/bbs/forum.php? ... B%E6%8E%A7%E4%BB%B6

不清楚你是怎么测试的。
你的页面上tab123下都有datagrid,监听的是activeChanged事件，销毁的效果是当切换到哪个tab，哪个tab下所有控件销毁，经测试，切换一次之后console.log打印的数量是正确的2