Ext的TabPanel autoLoad关闭的问题

Question

学习EXT一星期多了，做了个ＴabPanel，越到大难题了。
tabPanel.html里面是tabPanel，用autoLoad加载下面2个页面，
tabPanelAutoLoad.html里是个formPanel， （直接加载）
tabPanelAutoLoad2.html里面是个gridPanel，（点击 添加 按钮后加载）
[b]问题是：当我点击添加生成个新tab后，来回切换2 与 3 tab几次，再关闭2（点击标题上的叉），3就显示2的内容!!（3应该显示grid，却变成了2的form）。希望各位帮我看看那有问题。[/b] :cry:

tabPanel.html （TabPanel）
[code="java"] <br> Ext.onReady(function(){<br> var tab = new Ext.TabPanel({<br> id:&#39;mypanel&#39;,<br> height:300,<br> width:500,<br> deferredRender:false,<br> autoDestroy:false,<br> animScroll:true,<br> resizeTabs:true,<br> minTabWidth:100,<br> enableTabScroll:true,<br> items:[<br> {id:&quot;panel0&quot;,title:&quot;测试 1&quot;,layout:&#39;fit&#39;,html:&#39;Tab&#39;},<br> {id:&quot;panel1&quot;,title:&quot;formTab&quot;,closeAction:&#39;hide&#39;,closable:true,layout:&#39;fit&#39;,<br> autoLoad:{<br> url:&#39;tabPanelAutoLoad.html&#39;,<br> method:&#39;POST&#39;,<br> params:&#39;bane=jia&#39;,<br> scripts:true<br> }<br> }],<br> renderTo:&#39;mytab&#39;<br> });<br> tab.setActiveTab(0);</p> <pre><code> // 增加一个tab Ext.get(&#39;btn1&#39;).on(&#39;click&#39;,function(){ if(Ext.getCmp(&quot;panel2&quot;)){ // 如果此tab已经存在(hide也是已经存在) tab.add(&#39;panel2&#39;); tab.setActiveTab(&#39;panel2&#39;); alert(&#39;执行if, 不重新创建&#39;); } else { // 此tab不存在就重新创建 alert(&#39;执行else, 重新创建&#39;); var newTab = tab.add({ id:&#39;panel2&#39;, title:&#39;gridTab&#39;, layout:&#39;fit&#39;, closable:true, closeAction:&#39;hide&#39;, autoLoad:{ url:&#39;tabPanelAutoLoad2.html&#39;, method:&#39;POST&#39;, params:&#39;foo=bar&amp;wtf=1&#39;, scripts:true } }); tab.setActiveTab(newTab); } }); }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;test&quot;&gt;&lt;input type=&quot;button&quot; id=&quot;btn1&quot; value=&quot; 添 加 &quot;&gt;&lt;/div&gt; &lt;div id=&#39;mytab&#39;&gt;&lt;/div&gt; &lt;/body&gt;[/code] </code></pre> <p>tabPanelAutoLoad.html （FormPanel）<br> [code=&quot;java&quot;]<script type="text/javascript" language="javascript"><br> Ext.onReady(function(){<br> var form = new Ext.form.FormPanel({<br> defaultType:&quot;textfield&quot;,<br> title:&quot;表单&quot;,<br> labelAlign:&quot;right&quot;,<br> labelWidth:50,<br> buttonAlign:&#39;center&#39;,<br> frame:true,<br> url:&quot;form.jsp&quot;,<br> items:[{<br> fieldLabel:&quot;姓名&quot;,<br> name:&quot;name&quot;,<br> width:200,<br> emptyText:&quot;请填写姓名&quot;, // 初始值(获得焦点就会为空)<br> allowBlank:false, // 不允许为空<br> regex: /^[\u4E00-\u9FA5]+$/, // 只能是汉字<br> regexText: &#39;只能输入汉字&#39; // 只能是汉字 的错误提示(为空自动提示)<br> }],<br> buttons:[{<br> text:&quot;提 交&quot;,<br> handler:function(){<br> form.getForm().submit({<br> waitMsg:&#39;请等待...&#39;,<br> waitTitle:&#39;提示&#39;,<br> success:function(form, action){<br> Ext.Msg.alert(&quot;提示&quot;,action.result.msg);<br> },<br> failure:function(form, action){<br> // 这里检验的是 姓名，见form.jsp<br> if (action.failureType == Ext.form.Action.SERVER_INVALID) {<br> Ext.Msg.alert(&#39;错误&#39;, &#39;后台校验失败&#39;);<br> } else {<br> Ext.Msg.alert(&#39;错误&#39;, &#39;提交失败，请检查表单内容&#39;);<br> }<br> }<br> });<br> }<br> }]<br> });<br> form.render(&#39;myform&#39;);<br> });<br>

[/code]

tabPanelAutoLoad2.html （GridPanel）
[code="java"]
<br> Ext.onReady(function() {<br> var cm = new Ext.grid.ColumnModel([{<br> header : &quot;id&quot;,<br> dataIndex : &quot;id&quot;<br> }, {<br> header : &quot;姓名&quot;,<br> dataIndex : &quot;name&quot;<br> }, {<br> header : &quot;email&quot;,<br> dataIndex : &quot;email&quot;<br> }, {<br> header : &quot;性别&quot;,<br> dataIndex : &quot;sex&quot;<br> }, {<br> header : &quot;年龄&quot;,<br> dataIndex : &quot;age&quot;<br> }]);<br> var store = new Ext.data.SimpleStore({<br> fields : [&quot;id&quot;, &quot;name&quot;, &quot;email&quot;, &quot;sex&quot;, &quot;age&quot;],<br> data : [[&quot;1&quot;, &quot;jia&quot;, &quot;<a href="mailto:[e-mail]">[e-mail]</a>&quot;, &quot;1&quot;, &quot;20&quot;],<br> [&quot;2&quot;, &quot;jia&quot;, &quot;<a href="mailto:[e-mail]">[e-mail]</a>&quot;, &quot;1&quot;, &quot;20&quot;],<br> [&quot;3&quot;, &quot;jia&quot;, &quot;<a href="mailto:[e-mail]">[e-mail]</a>&quot;, &quot;1&quot;, &quot;20&quot;],<br> [&quot;4&quot;, &quot;jia&quot;, &quot;<a href="mailto:[e-mail]">[e-mail]</a>&quot;, &quot;1&quot;, &quot;20&quot;],<br> [&quot;5&quot;, &quot;jia&quot;, &quot;<a href="mailto:[e-mail]">[e-mail]</a>&quot;, &quot;1&quot;, &quot;20&quot;]]<br> });<br> var grid = new Ext.grid.GridPanel({<br> cm:cm,<br> store:store,<br> title:&quot;Grid测试&quot;,<br> height:300,<br> width:600,<br> loadMask:true<br> });<br> grid.render(&#39;mygrid&#39;);<br> })<br>

[/code]

Answer 1

你的TabPanel定义为autoDestroy: false
那当关闭标签时，并不会销毁标签对应的组件，而只从自己的子组件列表中移除
从而使它占着茅坑（还处于TabPanel的html节点下），又没有管它了。

P.S.
你这个程序存在内存泄漏，autoLoad加载的代码中创建了新组件，但它直接render到指定id的Dom节点上，也是没人管的角色……（其它的组件有父容器管）
就算标签页销毁了，也只是顺便将它的html节点给拿掉，但上面的事件啊什么的都在，它自己也在ComponentMgr中挂上号未移除。
如果页面一直打开，这个问题需要进行考虑