使用extjs版本为5.0。测试通过。
这个例子还很初级，仅仅是说明通过示例使用extjs进行组件开发的一个基本思路。
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>ext js test</title> <link rel="stylesheet" type="text/css" href="extjs/resources/ext-theme-classic-all.css" /> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .tabsp{ width:500px;height:450px; margin-top: 0px; margin-left: 0px; } .tabsp ul{ width: 500px;height: 20px; list-style: none; margin-bottom: 0px;margin: 0px; padding: 0px; border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0; } .tabsp p{ width: 500px;height: 330px; background-color: #ffffff; border:solid 1px #e0e0e0; } .tabsselectedli{ width: 100px;height: 20px; background-color: white; float: left; text-align: center; border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff; cursor:default; } .tabsunselectedli{ width: 100px;height: 20px; background-color: #e0e0e0; float: left; text-align: center; border:solid 1px #e0e0e0; cursor:default; } </style> </head> <body> <script lang="javascript"> //引入面板类 ext.require('ext.panel.panel'); //定义组件 ext.define('ext.ux.tabcontrol', { extend: 'ext.component', // subclass ext.component alias: 'widget.managedtabs', // this component will have an xtype of 'managedtabs' rendertpl:'<p id="mytabs" class="tabsp"><ul></ul></p>', // add custom processing to the onrender phase. onrender: function () { this.callparent(arguments); this.init(); }, //最后选中项 lastselectedindex:0, //获取选中tab头的索引 getselectedindex: function(selectobj){ var extlis = this.el.query("p>ul>li"); for(var i=0;i<extlis.length;i++){ if(extlis[i] == selectobj){ return i; } } }, init :function(){ var me = this; for(var i=0;i<2;i++){ this.insertpage(i-1,'tabcontrol'+i); } var extlis = this.el.query("p>ul>li"); for(var i=0;i<extlis.length;i++){ extlis[i].onclick = function(){ var idx = me.getselectedindex(this); me.selectpage(idx); } } }, //选中某页 selectpage: function(idx){ var extul = this.el.query("p>ul>li"); extul[this.lastselectedindex].classname = "tabsunselectedli"; extul[idx].classname = "tabsselectedli"; var extp = this.el.query("ul~p"); extp[this.lastselectedindex].style.display = "none"; extp[idx].style.display = "block"; this.lastselectedindex = idx; }, //插入页 insertpage: function(idx, title){ //var extel = this.el.query("p:first-child"); var extli = this.el.query("ul>li"); if(extli.length<1){ var extul = this.el.query("p>ul"); ext.domhelper.insertfirst(extul[0], '<li class="tabsunselectedli">' + title + '</li>'); }else{ ext.domhelper.insertafter(extli[idx], '<li class="tabsunselectedli">' + title + '</li>'); } var extp = this.el.query("ul~p"); var extul = this.el.query("ul"); ext.domhelper.insertafter(extp[idx] || extul[0], '<p>'+ title + '</p>'); } }); ext.onready(function () { var tab = ext.create('ext.ux.tabcontrol'); ext.create('ext.panel.panel', { header:true, title: 'tabcontrol panel', height: 200, width: 400, renderto: ext.getbody(), items: tab }) tab.selectpage(1); }); </script> </body> </html>
最终效果如图：
以上就是javascript-extjs组件开发完整代码的详细内容。