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

[/code]

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

[/code]

QUAN_QUAN_

ExtJs3中如何使得panel禁止关闭？

1条回答

为你推荐