ext学习资料(8)

2020-05-03 17:40

html代码:

</body> js代码: </p><p>Ext.onReady(function(){ </p><p> var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), activeTab:0, </p><p> height:700,//当用viewport布局时,这个height可以省去 frame:true, items:[{ </p><p> contentEl:\ tabTip:\</p><p> title:\加载页面的标签页\ closable:true }] }); }); </p><p>今天的内容简单.就暂且说做到了这里,下篇中我们说说tabpanel的滚动标签和动态添加标签的tabpanel! 敬请期待! </p><p>ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 </p><p>发布时间：2008-8-17 </p><p>? 上一篇文章： ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 ? 下一篇文章： Ext书写规范 </p><p>上一篇种我们简单的了解了下tabpanel </p><p>下面我们要介绍的是，如何动态的添加标签页！ 2.动态添加tabpanel的标签页效果图: </p><p> </p><p>- 31 - </p><p> </p><p>点击\添加新标签页\会添加一个标签页,而且激活这个新的标签页. html代码: </p><p><body style=\ </p><p> </body> js代码: </p><p>Ext.onReady(function(){ Ext.QuickTips.init(); </p><p> var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), activeTab:0, height:700, frame:true, items:[{ </p><p> title:\为html简单页面演示\ autoLoad:{url:\true} }] }); </p><p> //下面是添加新标签页的关键代码,很简单方便 var index=0; </p><p> Ext.get(\function(){ tabsDemo.add({ </p><p> title:\ id:\ html:\ closable:true }); </p><p> tabsDemo.setActiveTab(\ index++; }) }); </p><p>简单说明: </p><p> 其实添加的话,只要add()方法就可以了,但是我们还要激活这个新的标签页,就必须</p><p>setActiveTab(newtab的索引或id),关键就是我们不好判断这个索引,所以只好设臵个递增的全局变量index来给newtab取名，这样我们也就能准确的获取新的不重复的newtab了，也就容易激活了。而且我们可以通过下图看出来。 </p><p> </p><p>3.稍微修改上面的例子tabpanel(官方的例子) 效果图: </p><p> </p><p>- 32 - </p><p>我就不多说了，关键的几个参数注释了下 <body style=\ </p><p> </body> js代码： </p><p>Ext.onReady(function(){ Ext.QuickTips.init(); </p><p> var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), </p><p> //resizeTabs:true,宽度能自动变化,但是影响标题的显示 activeTab:0, height:200, </p><p> enableTabScroll:true,//挤的时候能够滚动收缩 width:200, frame:true, items:[{ </p><p> title:\ html:\ }] }); </p><p> var index=0; </p><p> //就是下面这个函数,关键的地方,非常简单也非常实用 function addTab() { </p><p> tabsDemo.add({ </p><p> title:\ id:\ html:\ closable:true }); </p><p> tabsDemo.setActiveTab(\ index++; } </p><p> //设臵一个按钮(上面的是一个链接,应用有点不同哦) new Ext.Button({ </p><p> text:\添加新标签页\ handler:addTab </p><p> }).render(document.body,\}); </p><p>4.为tabpanel标签页添加右键菜单 </p><p> </p><p>- 33 - </p><p>效果图： </p><p>点击\关闭其他所有页\后, </p><p>其他两个右键菜单还是道理相同. //几个参数说明 </p><p>1.enableTabScroll:true//前面已经说过了 </p><p>2. listeners:{\function(参数1,参数2,参数3){.}} </p><p> //右键菜单事件，三个参数分别为当前tabpanel，当前标签页panle，时间对象e 3.//扩充2，每个标签页都有激活和去激活事件 </p><p> activate和deactivate，他们的执行函数有个参数，就是当前标签页。例如： items:[{ </p><p> title:\ listeners:{ </p><p> deactivate:function(a){alert(\删除,a表示当前标签页\ activate:function(){alert(\激活\ }, </p><p> html:\ }] </p><p>4.menu=new Ext.menu.Menu()//menu组件，就不多说了，后面会专门分析下，不过不要忘记menu.showAt(e.getPoint());了 </p><p>html代码和上面的例子的html代码一样. js代码: </p><p>Ext.onReady(function(){ Ext.QuickTips.init(); </p><p> var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), </p><p> //resizeTabs:true,宽度能自动变化,但是影响标题的显示 activeTab:0, height:200, </p><p> enableTabScroll:true,//挤的时候能够滚动收缩 width:400, frame:true, </p><p> //下面是比上面例子新增的关键右键菜单代码 listeners:{ </p><p> //传进去的三个参数分别为:这个tabpanel(tabsDemo),当前标签页,事件对象e </p><p> \function(tdemo,myitem,e){ menu=new Ext.menu.Menu([{ text:\关闭当前页\ handler:function(){ </p><p> tdemo.remove(myitem); } },{ </p><p> </p><p>- 34 - </p><p> text:\关闭其他所有页\ handler:function(){ //循环遍历 </p><p> tdemo.items.each(function(item){ if(item.closable&&item!=myitem) { </p><p> //可以关闭的其他所有标签页全部关掉 tdemo.remove(item); } }); } },{ </p><p> text:\新建标签页\ handler:addTab }]); </p><p> //显示在当前位臵 </p><p> menu.showAt(e.getPoint()); } }, </p><p> items:[{ </p><p> title:\ html:\ }] }); </p><p> var index=0; </p><p> function addTab() { </p><p> tabsDemo.add({ </p><p> title:\ id:\ html:\ closable:true }); </p><p> tabsDemo.setActiveTab(\ index++; } </p><p> new Ext.Button({ </p><p> text:\添加新标签页\ handler:addTab </p><p> }).render(document.body,\}); </p><p>关于tabpanel的简单使用就说到了这里. </p><p> </p><p> </p><p>- 35 - </p><p></p> <br /> <p><script type="text/javascript">s("content-m");</script></p> </div> <div class="m-pages"><li><a>共8页: </a></li><li><a href='1011276_7.html'>上一页</a></li><li><a href='1011276.html'>1</a></li><li><a href='1011276_2.html'>2</a></li><li><a href='1011276_3.html'>3</a></li><li><a href='1011276_4.html'>4</a></li><li><a href='1011276_5.html'>5</a></li><li><a href='1011276_6.html'>6</a></li><li><a href='1011276_7.html'>7</a></li><li class="thisclass"><a href='#'>8</a></li><li><a href='#'>下一页</a></li></div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">ext学习资料(8).doc</span> <span>将本文的Word文档下载到电脑</span> <span>下载失败或者文档不完整，请联系客服人员解决！ </span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> </article> <div class="art-prenext"> <p>下一篇：<a href="/wenku/jiaoyu/1011275.html">华师17年3月课程考试《跨文化交际》作业考核试题</a></p> </div> <script type="text/javascript">s("like-m");</script> <div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/jiaoyu/1151876.html" title="中国石油大学(北京)远程在线考试答案—《油气">中国石油大学(北京)远程在线考试答案—《油气</a></li> <li><a href="/wenku/jiaoyu/1229519.html" title="中国移动网上大学传输设备PTN烽火L2题库">中国移动网上大学传输设备PTN烽火L2题库</a></li> <li><a href="/wenku/jiaoyu/1287270.html" title="苏教版三年级数学下册口算练习题竖式精选（两">苏教版三年级数学下册口算练习题竖式精选（两</a></li> <li><a href="/wenku/jiaoyu/1230553.html" title="2021年高考全国乙卷文科数学试题答案">2021年高考全国乙卷文科数学试题答案</a></li> <li><a href="/wenku/jiaoyu/1150887.html" title="2019年江苏五年制专转本英语统考真题">2019年江苏五年制专转本英语统考真题</a></li> <li><a href="/wenku/jiaoyu/938557.html" title="《统计学》复习题(3)">《统计学》复习题(3)</a></li> <li><a href="/wenku/jiaoyu/1131506.html" title="大型集团党建制度（包括三会一课、党员学习、">大型集团党建制度（包括三会一课、党员学习、</a></li> <li><a href="/wenku/jiaoyu/1053491.html" title="干燥机，润磨机设备操作维护规程">干燥机，润磨机设备操作维护规程</a></li> <li><a href="/wenku/jiaoyu/1144707.html" title="2006年中国药科大学有机化学考研专业课真题及">2006年中国药科大学有机化学考研专业课真题及</a></li> <li><a href="/wenku/jiaoyu/688148.html" title="夏季减肥打造小蛮腰">夏季减肥打造小蛮腰</a></li> </ul> </div> <div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/jiaoyu/1287711.html" title="2022最新数学教师工作总结方案多篇">2022最新数学教师工作总结方案多篇</a></li> <li><a href="/wenku/jiaoyu/1230558.html" title=" 2021高考全国甲卷文科数学试题及答案"> 2021高考全国甲卷文科数学试题及答案</a></li> <li><a href="/wenku/jiaoyu/1151861.html" title="中国石油大学(北京)远程在线考试答案—《安全">中国石油大学(北京)远程在线考试答案—《安全</a></li> <li><a href="/wenku/jiaoyu/1151866.html" title="石油大学《化工过程设备设计》主观题（单数）">石油大学《化工过程设备设计》主观题（单数）</a></li> <li><a href="/wenku/jiaoyu/1151863.html" title="中国石油大学(北京)远程在线考试答案—《催化">中国石油大学(北京)远程在线考试答案—《催化</a></li> <li><a href="/wenku/jiaoyu/1092360.html" title="石油大学远程在线考试《机械制造基础》试题答">石油大学远程在线考试《机械制造基础》试题答</a></li> <li><a href="/wenku/jiaoyu/666323.html" title="广西路网项目公路工程文件材料收集立卷归档实">广西路网项目公路工程文件材料收集立卷归档实</a></li> <li><a href="/wenku/jiaoyu/718492.html" title="六年级汉语拼音总复习题（新星小学）">六年级汉语拼音总复习题（新星小学）</a></li> <li><a href="/wenku/jiaoyu/1278950.html" title="最新苏教版三年级数学上册《间隔排列》易错题">最新苏教版三年级数学上册《间隔排列》易错题</a></li> <li><a href="/wenku/jiaoyu/1271665.html" title="部编版三年级语文上册基础知识练习（2021期末">部编版三年级语文上册基础知识练习（2021期末</a></li> </ul> </div> </div> <footer class="footer"> <p class="bt-links"><a href="https://m.77cn.com.cn">手机版</a><span class="v-line">|</span><a href="https://www.77cn.com.cn">PC版</a><span class="v-line">|</span><a href="https://m.77cn.com.cn/fww">范文大全</a></p> <p>Copyright © 2019-2022 免费范文网版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>客服QQ：邮箱：tiandhx2@hotmail.com<br/> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-18</a> </p> <div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e245478384fea490ec3a2317ee103ab"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>注册会员免费下载</b>（下载后可以自由复制和排版） </div> <div class="theme-popbod dform">        <p class='wxpay'><a href='https://www.77cn.com.cn/user/index.php'>马上注册会员</a></p> <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</p> </div> </div> <div class="theme-popover-mask"></div> <script> //menu $(".header .menu").on("click", function(){ $("body").append("<div class=\"mask-bg menu-mask-bg\"></div>"); $(".menu-slide").show(); $("html,body").css({height:$(window).innerHeight(), overflow:"hidden"}); setTimeout(function(){ $(".menu-slide").css({transform:"translateX(-50px)"}); },50) }); $("body").on("click", ".menu-mask-bg", function(){ $(".menu-slide").css({transform:"translateX(-100%)"}); $(".menu-mask-bg").remove(); $("html,body").removeAttr("style"); setTimeout(function(){ $(".menu-slide").hide(); },300) }); //search $(".header .search").click(function(){ if($(".search-box").is(":hidden")){ $(this).children("i").removeClass("search-icon").addClass("close-icon"); $(".search-box").fadeIn("fast"); }else{ $(this).children("i").removeClass("close-icon").addClass("search-icon"); $(".search-box").fadeOut("fast"); } }); //nav if($(".nav").length > 0) { var nav = new Swiper(".nav",{ slidesPerView: "auto" }); } </script> <script> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $('.word-pic a').click(function(){ $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); $(".vip-up").hide(); $(".vip-pay").hide(); var downid = '1011276' $('.wxpay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=wx&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); $('.alipay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=ali&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); }) $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) }) </script> <script src="/js/gobacktop.js" type="text/javascript"></script> </body> </html>